Question

我有一个简单的菜单（以margin:0 auto为中心）和一些列表项。现在，当我添加其他列表项时，我正在尝试将菜单保持在相同的居中位置。这是小提琴play with it

ul{
  list-style-type: none;
  background: red;
  margin:0 auto;
  width: 56%;
  max-width:600px

 }

ul li{

display: inline-block;
width: 100px;
background-color: #000;
color: #fff;

}

我希望li添加ul来包装它并仍然居中。

我不想使用flexbox，因为IE不支持它：D

The problem is solved. Giving the ul {display:table} Thank you all,especially Coop !

Answer 1

不确定这是否正是您所追求的，但我经常遇到导航菜单的问题，并提出了这个解决方案：

ul{
  display: table;
  margin: 0 auto;
  list-style-type: none;
  background: red; }

ul li {
  float: left;
  color: #fff;
  background-color: #000; }

注意li是浮动的，所以你还需要在ul上清除它们。我建议使用clearfix解决方案来做到这一点。例如，完整的代码可以是：

ul {
  display: table;
  margin: 0 auto;
  list-style-type: none;
  background: red; }

ul li {
  float: left;
  color: #fff;
  background-color: #000; }

.clear:before, .clear:after { content: " "; display: table; line-height: 0; }
.clear:after { clear: both; }
.clear { *zoom: 1; }

...

<ul class="clear">
  <li>First item here</li>
  <li>Second item here</li>
  <li>Third item here</li>
</ul>

添加列表时的自动宽度

1 个答案: