html - 如何在流体布局中将 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每个 s 都会像内联元素一样，但会保留其内容的结构，并且您可以像其他任何东西一样将它们居中。

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