У меня есть три области контрольных списков, которые я бы хотел выровнять вверху. Однако они, похоже, выравниваются внизу. Может кто-нибудь помочь с этим. Мой код находится в JSFIDDLE.
http://jsfiddle.net/rynslmns/7H5MA/
HTML
<div id="list1">
<h7>Basic Qualifications</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>21 years of Age</li>
<li><i class="fa-li fa fa-check"></i>20/20 Vision with or without corrective lenses</li>
<li><i class="fa-li fa fa-check"></i>Able to lift 50 lbs</li>
<li><i class="fa-li fa fa-check"></i>Has a friendly face</li>
</ul>
</div>
<div id="list2">
<h7>Background Check</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>No violent crimes</li>
<li><i class="fa-li fa fa-check"></i>No sexual offenses</li>
<li><i class="fa-li fa fa-check"></i>No theft</li>
<li><i class="fa-li fa fa-check"></i>No felonies</li>
</ul>
</div>
<div id="list3">
<h7>Motor Vehicle</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>21 with Valid US drivers license for 1 or more years</li>
<li><i class="fa-li fa fa-check"></i>Valid personal Auto Insurance that meets or exceeds state requirement</li>
<li><i class="fa-li fa fa-check"></i>Not more than 2 minor Moving violations in past 3 years (minor accident, failure to stop at stop sign)</li>
<li><i class="fa-li fa fa-check"></i>No major moving violations</li>
<li><i class="fa-li fa fa-check"></i>No DUI or other drug-related driving violations</li>
<li><i class="fa-li fa fa-check"></i>No Felonies or other drastic infractions in drivers lifetime driving history</li>
<li><i class="fa-li fa fa-check"></i>All other Reckless driving habits as buddyTruk sees fit</li>
</ul>
</div>
CSS
#list1 {
display:inline-block;
width:33%;
background-color:red;
}
#list2 {
display:inline-block;
width:33%;
background-color:red;
}
#list3 {
display:inline-block;
width:33%;
background-color:red;
}
Вы должны использовать vertical-align:top
для каждого элемента.
Это работает, потому что они являются встроенными элементами со значением по умолчанию для vertical-align
baseline
.
#list1, #list2, #list3 {
vertical-align:top;
}
добавьте стиль vertical-align:top;
каждому элементу списка