CSS를 사용하여 세 개의 이미지를 나란히 정렬하는 방법

Question

이 세 이미지를 나란히 정렬하고 id 메뉴를 사용하여 div를 지정하고 싶습니다.

HTML

<div id="menu">...</div>  
<div class="l-grid"> 
    <ul> 
     <li class="l-col l-size1of4"> 
      <div id="location"> 
       <img alt="Tell us your locaiton" src="images\location.jpeg" /> 
      </div> 
     </li> 
     <li class="l-col l-size1of4"> 
      <div id="delivery"> 
       <img alt="Choose menu to be delivered" src="images\dial\location.jpeg" /> 
      </div> 
     </li> 
     <li class="l-col l-size1of4"> 
      <div id="payment"> 
       <img alt="Payment mode" src="images\dial\payment.jpeg" /> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

.l-col { 
    float: left; 
} 

.l-size1of4 { 
    width: 166px; 
} 

인접한 사진은 페이지와 사업부 아이디 주 후에해야합니다.

Answer 1

설정 ul li.l-coldisplay:inline-block에 :

.l-col{ 
    display: inline-block; 
} 

JS 바이올린 :http://jsfiddle.net/mR64t/

Answer 2

모든 .L-COL 클래스 폭을 사용해보십시오,

li.l-col { 
      display: inline; 
     } 

또는

.l-col { 
      float: left; 
      width: 166px; 
     }