如何使用width屬性均勻地分隔我的導航欄的元素？

這裏是一個仿真：http://jsfiddle.net/LQ9DP/如何使用width屬性均勻地分隔我的導航欄的元素？

這裏分別是HTML和CSS相關章節： HTML：

<div id="footer">   
     <div class="nav_wrapper"> 
      <ul id="list_orientation"> 
       <li><a href="http://www.facebook.com">Facebook</a></li> 
       <li id = "portfolio_text"><a href="http://www.google.com">Portfolio</a></li> 
       <li><a href="http://www.google.com">Email</a></li> 
      </ul> 
     </div> 
    </div>

CSS：

#heading{ 
    font-family:'ChunkFiveRomanRegular'; 
    position: absolute; 
    font-size:80px; 
    top: 10%; 
    left: 0px; 
    width: 100%; 
    height: 1px; 
    text-align:center; 
} 

.border{ 
    border-top: 5px dashed #000000; 
    border-bottom:5px dashed #000000; 
    padding:20px; 
} 

body{ 
background:#ffdd22; 
} 

#subheading{ 
    font-family:'MuseoSlab500Regular'; 
    text-align:center; 
    font-size:25px; 
} 

.nav_wrapper{ 
    position:relative; 
    margin:auto; 
    /*width:30%;*/ 
    /*Change this 
    width:30%;*/ 
} 

.nav_wrapper ul li {display:inline; width:30%;} 
.nav_wrapper ul li a {width:30%;} 

#footer{ 
    width:100%; 
    float:left; 
    position:fixed; 
    bottom:0; 
    z-index:100; 
} 

#list_orientation { 
    padding:0; 
    margin:0; 
    height:5%; 
}

來源

2012-06-04 Louis93

你的意思是這樣的嗎？ http://jsfiddle.net/LQ9DP/13/

來源

2012-06-04 20:07:04 Keith

嗯，有點。我實際上想要最左邊和最右邊的元素碰到末端。你也可以告訴我爲什麼設置保證金的工作和寬度不起作用，即使他們都應該清除空間？ – Louis93

如果您給定固定寬度，元素內部的文本將被保留在該空間內。而且你不能確定你的每個元素的所有文本的大小都是一樣的。無論文本的大小如何，頁邊空白或填充都會有相同的空格。如果你想讓你的第一個或最後一個元素停留在邊緣而不是有餘量，你可以嘗試使用「first-child」和「last-child」僞類 – maksbd19

你會介意給予元素的填充而不是給定一個固定的寬度嗎？在垂直居中文本的情況下，您可以使用與文本的line-height相同的文本框的高度。

來源

2012-06-04 20:27:12 maksbd19

如何使用width屬性均勻地分隔我的導航欄的元素？

回答

相關問題