如何在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下拉菜单中停止单词换行。

回答

相关问题