Выравнивание встроенных блоков сверху

0

У меня есть три области контрольных списков, которые я бы хотел выровнять вверху. Однако они, похоже, выравниваются внизу. Может кто-нибудь помочь с этим. Мой код находится в 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;
} 
Теги:

2 ответа

2
Лучший ответ

Вы должны использовать vertical-align:top для каждого элемента.

Это работает, потому что они являются встроенными элементами со значением по умолчанию для vertical-align baseline.

ПРИМЕР ЗДЕСЬ

#list1, #list2, #list3 {
    vertical-align:top;
}
  • 0
    Спасибо, @JoshC. Я знаю, что это был глупый вопрос, я только начинаю изучать основные HTML и CSS. Я приму ваш ответ, когда время истекло.
1

добавьте стиль vertical-align:top; каждому элементу списка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню