css - CSS - 居中对齐多行列表

Question

我想在 div 中集中对齐多行列表：

http://jsfiddle.net/8Wu2S/

在这个例子中，我设置了一个固定的宽度ul来展示我想要实现的目标。但是，我需要ul动态的宽度，以便它只包含列表项（它们是固定宽度），即缩小以适应。每行列表项应从左侧开始，并在流入新行之前尽可能多地容纳项目。

是可变宽度，因此div例如，如果div稍微宽一点，它看起来像这样：

http://jsfiddle.net/8Wu2S/1/

我已经尝试了各种方法，但似乎比我想象的要困难得多！

Answer 1

ul {
    background-color: red;
    width: 80%;
    margin: 0 auto;
}
li {
    display: inline-block;
    width: 49%;
    border: 1px solid black;
}

我使用了 49%，但您可以使用 CSSbox-sizing: border-box来避免这种情况并使用固定的 50%。

Answer 2

将 ul 和 li 元素设置为内联显示。

 <div style="width:20%;">
     <ul style="display:inline;">
       <li style="display:inline;">Foo</li>
       <li style="display:inline;">bar</li>
     </ul>
 </div>

jsFiddle 示例：http: //jsfiddle.net/QcNTW/4/

Answer 3

我设法找到了基本相同的问题：

CSS - 如何使内部带有包裹的浮动的 DIV 仅与容纳浮动所需的一样大？

事实证明没有很好的解决方案。一种方法是使用媒体查询来设置ul. 另一种方法是使用像Masonry这样的 jQuery 插件。

无论如何，我可能会在我的网站上使用 Masonry，所以我想我会沿着这条路走，非 JavaScript 用户会退回到非居中的布局。