Bootstrap list-inline li元素错开

Question

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

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

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

是什么导致元素错开？

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