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