상단의 인라인 블록 정렬

Question

맨 위에 함께 정렬하려는 세 가지 체크리스트 영역이 있습니다. 그러나, 그들은 바닥에 정렬하는 것 같습니다. 누구든지이 일을 도울 수 있습니까? 내 코드는 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 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 인 인라인 요소이기 때문에 작동합니다.

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

Answer 2

EXAMPLE HERE

는,리스트의 각 요소에 @JoshC을