使用Twitter Bootstrap的内联列表填充式div显示不正确

Question

我想创建一个无序列表来展示一系列的div，它们都是由jquery根据数组中项目数量动态填充的，并且每个div都是140px x 140px的。

然而，使用当前代码它们并没有按照水平方向直线排列，我希望修复这个问题。

HTML

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="product-list">
            <ul class="list-inline">
            </ul>
        </div>
    </div>
</div>

JQuery填充列表：

JQUERY

productLoad: function() {
    for (var i = 0; i < state.greens.length; i++) {
        $(".product-list ul").append("<li><div class='product'><p> " + state.greens[i].name + " </p></div></li>");
    }
},

函数productLoad是display对象的一部分，通过display.productLoad()调用。

我使用以下CSS来定义.product：

CSS

.product {
width: 140px;
height: 140px;
background-color: #006B3C;
opacity: 0.6;
padding: 5px;
}

.product p {
color: #fff;
text-transform: uppercase;
font-size: 16px;
text-align: center;
}

我怀疑我的问题在于CSS，但我不确定是什么原因导致了对齐错误。一些正方形会溢出到下面一个正方形中，它们也不像我想要的那样水平排列。

您可以在这里查看结果：超级食品选择器 滚动到“单击产品以进入其详细页面”部分，您将看到未对齐的 div 列表。

- Jonathan Bechtel

Answer 1

将 .list-inline>li 的 CSS 添加 vertical-align: top。

- bumpy

Answer 2

对于您的list-inline>li选择器，我建议进行以下更改。

删除display:inline-block。然后添加padding-top:8px;float:left;

- Michael Hommé