CSS下拉菜單間距

我已經成功創建此導航菜單，但菜單項的間距已關閉。同樣在次要名單上，由於其中一項，我不得不讓它們變寬。有沒有辦法讓寬度根據最長項目的長度而變化。CSS下拉菜單間距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Menu</title> 
<style type="text/css"> 

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
    width: 10em; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding-top:12px; 
    height: 28px; 
    float: left; 
    background: #f15a22; 
    width: 7em; /* width needed or else Opera goes nuts */ 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: auto; 
    top: 45px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    color: #f9f7ee; 
} 


</style> 

<script type="text/javascript"><!--//--><![CDATA[//><!-- 

sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
     } 
     sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

//--><!]]></script> 

</head> 
<body> 



<ul id="nav"> 
    <li><a href="#">About</a> 
    </li> 
    <li><a href="#">Teaching</a> 
     <ul> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Piano</a></li> 
      <li><a href="#">Guitar</a></li> 
      <li><a href="#">Drums</a></li> 
      <li><a href="#">Theory</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Performing</a> 
     <ul> 
      <li><a href="#">Classical Piano</a></li> 
      <li><a href="#">Jazz Piano</a></li> 
      <li><a href="#">The Ginger Nuts</a></li> 
      <li><a href="#">The Legion Of Doom</a></li> 
     </ul>  
    </li>  
    <li><a href="#">Media</a> 
     <ul> 
      <li><a href="#">Photos</a></li> 
      <li><a href="#">Audio</a></li> 
      <li><a href="#">Video</a></li> 
      <li><a href="#">Articles</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Blog</a> 
    </li> 
    <li><a href="#">Links</a> 
    </li>   
    <li><a href="#">Contact</a> 
    </li> 

    <!-- etc. --> 

</ul> 


</body> 
</html>

來源

2011-09-16 Ged

當你說的間距爲「關」，是什麼*應該*就像？菜單的總寬度應該是多少？ – thirtydot

@thirtydot我認爲海報是指這種現象：http://jsfiddle.net/uNNKd/1/（懸停在表演） –

@約瑟夫：我的評論是關於他的第一句話，這似乎是在談論不平衡文本之間的間距（忘記這部分的下拉菜單）。 – thirtydot

這解決了這個問題。雖然沒有測試過跨瀏覽器。使用這種方法也對UL

http://jsfiddle.net/uNNKd/

#nav li li { 
    clear: both; 
    width: auto; 
}

編輯

#nav li li { 
    float: none; 
    width: auto; 
}

這也將工作刪除您額外的寬度屬性。

來源

2011-09-16 23:38:28

以下是截圖http://shiny.me/share/7t1nh4.png 問題1：每個項目之間的間距甚至不是問題2：我想使下拉菜單中每個項目的寬度不同取決於文本的寬度而不是固定的寬度。 – Ged

@Ged老鼠......對不起......我得走了......你可以看看我對小提琴的編輯：http://jsfiddle.net/uNNKd/2/。它們由「編輯」表示。 –

試試這樣說：

http://jsfiddle.net/andresilich/TMrpA/2/

::編輯::

這裏是CSS代碼：

body { 
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; 
} 

#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block; 
} 

#nav li { /* all list items */ 
/* The sum of the next two lines creates the nav bar height*/ 
    padding:0 20px; 
    height: 40px; 
    line-height:40px; 
    float: left; 
    background: #f15a22; 
    position:relative; 
} 

#nav li li { 
    float:none; 
} 

#nav li ul { /* second-level lists */ 
    position: absolute; 
    background: #f15a22; 
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */ 
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: 0; 
    top: 40px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/ 
} 

/*--- from Storm3y's code ---*/ 
#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid2.gif); 
    background-position:0% 50%; 
    background-repeat:no-repeat; 
    color: #f9f7ee; 
}

來源

2011-09-16 23:54:44

修正了二級菜單中的對齊方式，這裏是第二個版本：http://jsfiddle.net/andresilich/TMrpA/2/ ...現在一切都按照李的內容的大小正確對齊和間隔標籤。 –

Working Brilliant :)謝謝 – Ged

請在此處鏈接以供參考。 –

CSS下拉菜單間距

回答

相關問題