如何在流体布局中将ul中的列表居中？

Question

html

<div class="wrapContent">
   <ul>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Lorem</li>
   </ul>
</div>

.wrapper是一个流畅的div，我试图将浮动的左侧列表集中在页面上。对于ul中的第一个和最后一个li，基本上能够保持相同的距离。

目前我这样做：

.wrapContent {
   width: 100%;
   margin: 0 auto;
}

.ul {
   width: 100%;
   margin: 0 auto;
}

.li {
   width: 250px;
   margin: 0 auto;
   float: left;
}

Answer 1

不要漂浮它们。 （这是你应该在你的问题中包含的一个重要细节... :)）请改用display。

ul {
    text-align: center;
}
li {
    display: inline-block;
    text-align: left;  /* optional */
}

现在li每个都会像内联元素一样，但保留其内容的结构，您可以像其他任何内容一样将它们居中。

顺便说一句，您不需要在块元素上使用width: 100%;;它们会自动扩展以适应容器的宽度。