0

我有一个margin:0 auto包含一些列表项的简单菜单（以 为中心）。现在，当我添加其他列表项时，我试图将菜单保持在相同的居中位置。这是它的小提琴演奏 

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的 's 来ul包装它并且仍然居中。

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

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

1 回答 1

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>
于 2013-07-31T15:51:52.607 回答