如何使用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;
}

相鄰圖片必須在頁面中且位於div id main之后。

Answer 1

將ul li.l-col為display:inline-block ：

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

JS小提琴： http ： //jsfiddle.net/mR64t/

Answer 2

嘗試對所有.l-col類使用width，

 li.l-col {
            display: inline;
        }

要么

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