基於float佈局

css樣式：

.layout1 li
{
    float:left;
    border:0;
    width:25%;
}

<ul class="layout1">
    <li>first cell...</li>
    <li>secondcell</li>
    <li>third cell.</li>
    <li>the fourth cell</li>
</ul>

使用float實現等寬列時，ul元素的高度為0，因為float是使用懸浮的方式實現停靠，不佔用佈局空間，所以需要加上以下樣式，清除浮動。

.layout1:after
{
    content:' ';
    display:block;
    clear:both;
}

頁面的寬度為100%，而li的寬度25%，那麼4個li的寬度就是100%，也就是把頁面 的寬度已經完全撐起來了，如果再給li加一個邊框，就會造成元素擠壓，把最後一個li給擠到下面一行去了。所以使用float時一定要注意這一點。規避其它會增加寬度的樣式，比如border margin-left margin-right等。

基於表格的自動佈局（display:table）

css樣式：

.layout2 li
{
    display: table-cell;
    width: 1%;
}
 

<ul class="layout2">
    <li>first cell...</li>
    <li>secondcell</li>
    <li>third cell.</li>
    <li>the fourth cell</li>
</ul>

這種方式是根據自動佈局的演算法計算每一列的寬度，當單元格里的內容長度不一致時，會發生不單元格不等寬的現象。

基於表格的手動佈局（display:table）

css樣式：

.layout3
{
    display:table;
    width:100%;
}
.layout3 li
{
    display:table-cell;
    width:25%;
}
 

<ul class="layout3">
    <li>first cell...</li>
    <li>secondcell</li>
    <li>third cell.</li>
    <li>the fourth cell</li>
</ul>

這種方式其實與第一種是類似的，設定父節點為table方式，然後設定寬度為100%。子元素按照同比例排列，這個比第一種好的地方是，總寬度永遠是100%。如果li包含border或者margin之類的標籤，或者為其中某一個子元素設定一個固定的值， 它都會調整每個子元素的寬度。保證總寬度在100%。 
使用表格的自動佈局和手動佈局都是table-layout屬性的auto屬性。至於演算法的具體描述，可以看這裡：http://www.tuicool.com/articles/VzUVfyi。

基於表格的固定佈局

css樣式：

.layout4
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.layout4 li
{
    display: table-cell;
}

<ul class="layout4">
    <li>first cell...</li>
    <li>secondcell</li>
    <li>third cell.</li>
    <li>the fourth cell</li>
</ul>

使用固定方式，理論上是無論你在ul中新增多少個元素，它都會按照等寬的方式進行呈現出來。
試了一下，絕大部分瀏覽器都支援和IE8以上。