jquery - 带有 div 的内联列表无法使用 Twitter Bootstrap 正确显示

Question

我正在尝试创建一个无序列表来显示一系列 140px x 140px 的 div，并通过 jquery 根据数组中的元素数动态填充。

但是它们并没有与我的代码一起显示在水平直线上，我想解决这个问题。

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() 调用；

我为 .product 使用以下 CSS:

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，但我不确定是什么导致了对齐错误。一些正方形渗入它下面的正方形，它们不像我想要的那样在一条直线上。

您可以在此处查看结果:superfood picker

滚动到显示“单击产品以转到其详细信息页面”的部分，您将看到未对齐的 div 列表。

Answer 1

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