CSS - 用於填充所有可用spce的水平導航列表項

使用CSS如何獲得水平列表並使所有列表項滿足父空間的可用寬度。CSS - 用於填充所有可用spce的水平導航列表項

我漂浮李的左邊，然後應用一些填充，但我似乎無法得到完整的寬度填充。因此在右側留下空隙。

我可能會將最後一個項目右移，但是會發生什麼情況是導航項目的活動狀態會因爲存在應用於活動列表項目頂部的邊框而突出顯示間隔。這將顯示差距。

2011-05-07 David

吧？你如何做這件事的代碼示例？如果你漂浮，你必須指定寬度。浮動元素不知道寬度：100％; – robx 2011-05-07 15:44:47

把它當作表：

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     nav {width: 500px;} 
     nav ul { 
      list-style: none; 
      margin:0; 
      padding:0; 
      display: table; 
      background: red; 
      width: 100%; 
     } 
     nav li { 
      z-index:10; 
      text-align: center; 
      display: table-cell; 
     } 
     nav a { 
      color: #fff; 
      text-decoration: none; 
      padding: 0 10px 0; 
      height: 20px; 
      line-height: 20px; 
      display: block; 
      text-align: center; 
      background: blue; 
     } 
    </style> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Lorem</a></li> 
      <li><a href="#">ipsum</a></li> 
      <li><a href="#">dolor</a></li> 
      <li><a href="#">sit</a></li> 
      <li><a href="#">amet</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

http://jsfiddle.net/SURzu/

來源

2011-05-07 15:46:59 seler

我已經嘗試過哪些方法無效 - 我仍然存在這種差距。主要的問題是不同的菜單項可以有不同的文本長度，所以我不能給每個寬度。 – David 2011-05-07 15:56:19

@大衛，我編輯過的文章給你完整的例子。祝你好運。 – seler 2011-05-07 15:57:08

感謝作品perfet - 我有其他風格影響它。 – David 2011-05-07 16:53:51

CSS - 用於填充所有可用spce的水平導航列表項

回答

相關問題