Question

我正在尝试很长一段时间。我找到了很多解决方案，但没有一个有效。我需要将li放在ul中（菜单div和ul是我需要的正确尺寸）。

CSS：

doxypy

HTML：

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
}
li {
  float: left;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
}
ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

编辑：我需要将所有的LI集中在 horizontaly 。 Image

Answer 1

如果我能正确理解你......试试那个：

CSS：

div.menu {
    margin: 0 10%;
    width: 128px; /* it's the root case */
}
ul {
    text-align: center;
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
}

HTML：

<div class="menu">
    <ul>
        <li><a href="#" class="menu">Item 1</a></li>
        <li><a href="#" class="menu">Item 2</a></li>
    </ul>
</div>

Answer 2

如果你想中心de＆lt; li＆gt;你必须给＆lt; ul＆gt;一个宽度。元素，如果您想将文本居中于de＆lt; li＆gt;然后你应该在＆lt; li＆gt;中设置text-align：center。样式

Answer 3

这应该足以使文本居中。给div一个ID并将其作为中心。但要小心，因为应用float实际上会产生负面影响 - text-align:center; doesn't work

#centerText
{
text-align: center;
}

<div class="menu" id="centerText">
    <ul>
       <li></li>
    </ul>
</div>

Answer 4

首先，您需要为Unordered List元素指定宽度。使用flexbox，您可以使用justify-content来对列表项进行居中，或者将它们放在ul周围。如果元素在元素中漂浮为li元素，则不能将元素居中。删除浮动并添加display：inline-block，它也可以正常工作。

＆＃13;

*{margin: 0;}
.menu ul {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: rgba(0,0,0,.5);
  padding: 30px 0;
}
.menu a{
  text-decoration: none;
  color: #ffffff;
}

＆＃13;

<div class="menu">
    <ul>
        <li><a href="#" class="menu">Item 1</a></li>
        <li><a href="#" class="menu">Item 2</a></li>
              <li><a href="#" class="menu">Item 3</a></li>
              <li><a href="#" class="menu">Item 4</a></li>
              <li><a href="#" class="menu">Item 5</a></li>
    </ul>
</div>

＆＃13;

Answer 5

对于li类，尝试删除float：left并将其替换为display：inline-block;。我认为这会做你想要完成的事情。如果没有，请给我们更多细节。

<强> CSS

div.menu {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0px;
}
li {
    display: inline-block;
    list-style-type: none;
    width: 128px;
    height: 77px;
    margin: 0px;
    padding: 0px;
}
ul {
    text-align: center;
    margin: auto;
    padding: 0px;
}

Codepen：https://codepen.io/anon/pen/wdOaLd

Answer 6

如果您正在设计菜单，则需要使用此标记：

<div class="menu">
   <ul>
      <li><a href="#" class="menu">Item 1</a></li>
      <li><a href="#" class="menu">Item 2</a></li>
   </ul>
</div>

和这个CSS来对齐项目：

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
  background:lightcyan; //for visualization only
}

.menu ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

.menu ul li {
  display:inline-flex;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background:lightblue; //for visualization only
  align-items:center;
  justify-content:center;
}

.menu ul li a {
  align-self:center;
}

检查JSfiddle https://jsfiddle.net/r2gnkknv/

你将以此结束：

Answer 7

这是保存我这一天的代码：

.tab ul{list-style-type: none;margin: 0px;padding: 0px;text-align: center;}
.tab li{display: inline-block;padding: 2px;float: none !important;}

无法将<li>置于<ul>内

7 个答案: