Question

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

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

div是可变宽度，因此，例如，如果div稍微宽一点，它将如下所示：

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

Answer 1

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

我使用了49％，但您可以使用CSS box-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 - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?

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

我可能会在我的网站上使用Masonry，所以我想我会沿着这条路走下去，非javascript用户会回到非中心布局。

CSS - 中心对齐多行列表

3 个答案: