如何在CSS下拉菜單中停止單詞換行。

在我的下拉菜單中，LI中的一些文本正在換行。我希望他們都是1行。如何在CSS下拉菜單中停止單詞換行。

我曾嘗試：

ul ul li {width:100%;}

不工作。

下圖顯示了我所面臨的問題。

enter image description here

來源

2011-09-20 Extelliqent

沒有html和css來看看，這將是不可能的幫助。考慮在http://jsfiddle.net上粘貼示例。 –

這是它; nav {width：905px; display：block; margin：0 auto 20px; top：10px;位置：相對;背景色：＃4466dd; } nav ul {padding：0 0 0 2px; margin：0; } nav li {position：relative;向左飄浮;列表樣式類型：無; } nav ul：after {content：「。」;顯示：塊;高度：0;明確：兩者; visibility：hidden的; } nav li a {white-space：nowrap; display：block;填充：5px 10px; text-decoration：none; color：＃000000; font：bold 13px Helvetica，sans-serif; } nav li a：focus {outline：none; color：＃4466dd; } nav li.last a {border：none; } nav a span {display：none;} – Extelliqent

nav ul ul {display：none; position：absolute; left：0; padding：5px;} nav ul ul {width：100％; color：#FFFFFF; font ：13px Helvetica，sans-serif; padding：0; margin：5px;} – Extelliqent

li { 
    white-space: nowrap; 
}

這應該停止的文字環繞在李中對你的下拉列表中（「技術諮詢」）

來源

2011-09-20 23:12:48 rlemon

你也可以在'ul'上設置'overflow'，這樣'expanded '標題不會與你的容器重疊..'ul {overflow：auto; }' – rlemon

現在一個菜單項就像這樣 - > http://i.stack.imgur.com/h18wL.jpg – Extelliqent

你們繼續前行，看看它; http://extelliqent.squarespace.com – Extelliqent

廣場這樣的：

{ 
    height: auto; 
}

在的情況下，在這裏的問題，在下拉菜單上（ul li ul li）放置height: auto;。

我會猜測你的CSS爲ul li a（「Small Business」）設置了一個高度。這將文本放置在定義的高度之外。

來源

2012-03-06 23:08:50 Bryan

如何在CSS下拉菜單中停止單詞換行。

回答

相關問題