按照HTML中的寬度排列菜單項

我想知道更好的方式來安排下面菜單的列表項。好像我提列表項目項目1，TEM2，項目3等作爲該項目是一個小的字佔據全部都看在寬度細更小的空間，如下圖所示：按照HTML中的寬度排列菜單項

enter image description here 但是，如果我走名稱爲「功能」，「支持」，「它是如何工作的」，然後它沒有正確地安排它們，因爲它顯示了每個列表項之間的很多空間n0所以有沒有更好的方法來擺脫這種情況，比如通過它擴大菜單的寬度或類似的

enter image description here

的東西這是我的菜單CSS：

.menu 
{ 
    background-image: url('../images/header.png'); 
    background-repeat: no-repeat; 
} 


ul.menu { 
    display:block; 
    margin:0; 
    padding:0; 
    height:60px; 
    text-align:right; 
} 

ul.menu li { 
    display:inline-block; 
    width:50px; 
    height:30px; 
    margin-right:10px; 

}  

ul.menu li:first-child { 
    float:left; 
    margin-left:10px; 
} 

ul.menu li a 
{ 
    text-decoration: none; 
    padding: 15px 0; 
    width: 50%; 
    color: #eee; 
    float: left; 
    text-align: center; 
    font-weight: bold; 
    font-style: normal; 
    font-family: Verdana; 
}

這是我的標記：

<div class="menu"> 
     <ul class="menu"> 
      <li><a href ="#">Home</a></li> 
      <li><a href ="#">Features</a></li> 
      <li><a href ="#">Support</a></li> 
      <li><a href ="#">Blog</a></li> 
      <li><a href ="#">How it work's</a></li> 
     </ul> 
    </div>

其實按照德里克的答案。如果我改變了我的寬度爲100px那麼就說明我這樣

enter image description here

來源

2012-01-09 coder

width:50px;是你的問題。

你可以刪除它，：

手動設置每個項目或
創建一個函數來測量寬度的它的內容，並相應地調整或
讓他們沒有定義的寬度

<li style="width: 60px;"><a href="#">Blog</a></li>

<li style="width: 130px;"><a href="#">How it work's</a></li>

來源

2012-01-09 18:18:12 Derek

@ Derek-Fist感謝您的回覆，並根據您的回答，如果我改變了，那麼它顯示了我在問題中更新的方式。因爲它給了我很多在每個列表項之間無用的空間。 – coder 2012-01-09 18:23:10

@Derek-最後找到了你所建議的正確方法，而不必提及其工作良好的寬度。 – coder 2012-01-09 18:38:23

很高興你有它的工作。下次您發佈問題時，您可能需要使用jsfiddle.net，它使我們能夠輕鬆測試答案併爲您提供更詳細和高質量的答案。 – Derek 2012-01-09 18:54:36

按照HTML中的寬度排列菜單項

回答

相關問題