與自動寬度和標籤的相同尺寸的水平菜單

Question

我想創建一個自動（100％）寬度的水平菜單。

MY CSS

.horizontal { 
    width: 100%; 
} 

.horizontal ul { 
    display: table; 
    width: 100% 
} 

.horizontal li { 
    display: table-cell; 
} 

.horizontal li a { 
    height: 30px; 
    display: block; 
    border: 1px solid #aaa; 
    text-align: center; 
    padding: 4px; 
    margin: 0 2px; 
    background: #ccc; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 

MY HTML

<div class="horizontal"> 
<ul> 
    <li><a href="#">Long Item</a></li> 
    <li><a href="#">Short Item</a></li> 
    <li><a href="#">Really Long Item</a></li> 
    <li><a href="#">Nav Item</a></li> 
    <li><a href="#">Some Other Link</a></li> 
</ul> 
</div> 

我的問題是，我想的是， 「標籤」（一個元件）具有相同的尺寸維持的寬度

100％

這樣做可能嗎？我怎麼能這樣做？由於

Answer 1

給李寬度。

.horizontal li { 
    display: table-cell; 
    width:20%; // because you have 5 anchors. 
} 

Answer 2

你可以通過簡單地添加像這樣做：

li{width:400px;}

如果你已經或將要在頁面上更li的，你可以給他們一個班，給ul一類及用途：

ul.header > li{width:400px;}

或只使用：

.horizontal > ul > li{width:400px;}

Answer 3

不知道，如果你正在尋找以下，但你可以嘗試以下方法：以百分比

.horizontal ul { 
    height: 40px; 
    padding: 0 100px; 
    font-weight: 500; 
    line-height: 40px; 
    text-transform: uppercase; 
    text-align: justify; 
    background: #222; 
} 

.horizontal ul li{ 
    display: inline-block; 
} 

.navigation ul li a { 
    text-decoration: none; 
    color: #fff; 
}