Bootstrap list-inline li元素是交错的

Question

我在无序列表中使用了 list-inline 类的Bootstrap。我想让所有 li 元素具有相同的大小，并在行中完美对齐。

我创建了一个jsFiddle来演示问题。您需要扩展预览区域才能完全看到问题。

预期的行为是每个 li 元素将具有相同的宽度和高度并且在一行中（全部在同一级别上）。实际行为是li元素交错。

导致元素错开的原因是什么？

HTML     

文档

<ul class="list-inline box box20x25">
    <li>
        <p><i class="fa fa-home fa-fw"></i></p>
    </li>
    <li>
        <p class="title">Pteranodon was a flying reptile that lived during the time of the dinosaurs</p>
        <p class="description">Pteranodon was a flying reptile that lived during the time of the dinosaurs - it was not a dinosaur, but was a close relative of the dinosaurs. Pteranodon have three clawed fingers on each hand, and four clawed toes on each foot. Learn about Pteranodon, a.</p>
    </li>
    <li>
        <p class="title">Pteranodon was a flying reptile that lived during the time of the dinosaurs</p>
    </li>
</ul>

CSS

ul.box li {
    background: #000;
    color: #ccc;
}

ul.box20x25 li {
    height: 200px;
    width: 400px;
}

Answer 1

list-inline所做的只是将列表项的显示更改为display: inline-block;。由于内联项的垂直对齐默认为基线，因此您需要通过设置vertical-align:top来更改它。

<强> jsFiddle example