Question

我正在尝试创建一个无序列表来显示一系列div，它们都是140px到140px，并根据数组中的项目数通过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（）;

调用

我将以下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，但我不确定导致对齐错误的原因。一些方块流入它下面的一个方块，它们不是我想要的直线水平线。

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

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

Answer 1

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

的CSS中

Answer 2

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

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

内联列表填充的div没有正确显示与twitter bootstrap

2 个答案: