Question

我有三个清单区域，我想在顶部对齐。但是，它们似乎在底部对齐。有人能帮忙吗。我的代码在JSFIDDLE上。

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 driver’s 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 driver’s 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;
}

Answer 1

您可以在每个元素上使用vertical-align:top。

这是有效的，因为它们是内联元素，默认vertical-align值为baseline。

EXAMPLE HERE

#list1, #list2, #list3 {
    vertical-align:top;
}

Answer 2

将样式vertical-align:top;添加到每个列表元素

在顶部对齐内联块

2 个答案: