水平菜單ul右對齊左對齊

Question

我搜遍了所有內容，似乎無法找到確切的解決方法。這看起來很簡單，但我最近一直在靠牆敲打我的頭，試圖讓它恰到好處。

我在網站上有一個簡單的水平菜單。我正在使用UL來完成所有工作。這裏是我的代碼：

> <div id="nav"> 
>   <ul> 
>     <li><a href="#">Home</a></li> 
>     <li><a href="#">company</a></li> 
>     <li><a href="#">Products</a></li> 
>     <li><a href="#">Services</a></li> 
>     <li><a href="#">Involvement</a></li> 
>     <li><a href="#">Blog</a></li> 
>     <li class="right"><a href="#">Contact Us</a></li> 
>    </ul> 
>   </div> <!-- End Nav --> 

我的CSS如下：

#nav ul{ 
    width:980px; 
    margin:0; 
    padding:0; 
    border:1px solid red; 
} 
#nav ul li{ float:left;color:#FFF} 

#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF} 
#nav ul li.right{float:right;margin-right: -30px; 
} 

我遇到的問題是，在最後一個項目將右對齊，但現在有第二之間的巨大空間將持續標籤和最後一個標籤。這是因爲我在裏的一部分留下了填充。我只是想讓第一個文本對齊左側和最後一個文本，以對齊右側和其他位置之間的空間。你可以在這裏看到這個問題：http：//jsfiddle.net/nathan1342/sPZG9/

任何幫助將非常感謝！

謝謝！

Answer 1

你不應該在這裏使用不同的浮點值。 改爲使用float：left代表所有li並將第一個和最後一個元素設置爲絕對位置。 包裝盒#nav應該相對定位。

<style> 

#nav{ 
    position: relative; 
    width:980px; 
    margin:0; 
    padding:0; 
    height: 100px; 
    border:1px solid red; 
} 

#nav ul{ 
    display: block; 
    margin: 0px auto; 
    width: 600px; 
} 
#nav ul li {list-style: none} 
#nav ul li a{display:block; float: left; padding:5px 62px 0 0px; text-decoration:none; color:#000;} 


.left{ 
    position: absolute; 
    top: 0px; 
    left: 10px; 
    text-align: left; 
} 

.right{ 
    position: absolute; 
    top: 0px; 
    right: 10px; 
} 

.right a { padding-right: 0 !important;} 

</style> 

<div id="nav"> 
      <ul> 
       <li class="left"><a href="#">Home</a></li> 
       <li><a href="#">company</a></li> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Involvement</a></li> 
       <li><a href="#">Blog</a></li> 
       <li class="right"><a href="#">Contact Us</a></li> 
      </ul> 
</div> <!-- End Nav --> 

Answer 2

好，它的效果並不理想，但你可以用這個作爲你的CSS得到近似的結果...

#nav ul{ 
    width:980px; 
    margin:0; 
    padding:0; 
    border:1px solid red; 
} 
#nav ul li{ float:left;color:#fff;width:16%;} 

#nav ul li a {display:block;text-decoration:none; color:#FFF;} 
} 

這只是耍過的事實，因爲我們知道你有6項目在列表中，每個項目應該佔用約16％的空間。

Answer 3

此處的代碼和您在jsfiddle鏈接中提供的代碼有差異，例如您沒有在此處發佈#nav標記。調整寬度導航欄的寬度，對我來說沒有任何問題，在聯繫我們鏈接延伸到遠端並且其他所有內容均勻分佈的情況下，它會呈現良好狀態。

Answer 4

試試這個：

http://jsfiddle.net/Szv5x/

我使用的顯示：inline-block的，改變了填充，設置一個寬度使菜單你充滿均勻分佈的項目指定的寬度。

Answer 5

這與修復它非常接近。儘管對代碼進行了一些修改，但我已經明白了。謝謝噸!!：

#nav{ 
    position: relative; 
    width:980px; 
    margin:0 auto; 
    padding:0; 
    height: 40px; 

} 

#nav ul{ 
    display: block; 
    margin: 0 0 0 -40px; 
    width: 980px; 
    font-size:20px; 
} 
#nav ul li {list-style: none} 
#nav ul li a{display:block; float: left; padding:5px 68px 0 0px; text-decoration:none; color:#fff;} 


.right{ 
    position: absolute; 
    top: 0px; 
    right: 10px; 
} 

.right a { padding-right: 0 !important;}