允许文本在css菜单中换行 [英] Allow text to wrap in css menu

问题描述

我有一个使用无序列表创建菜单的模板。 请参阅此处

I have a template that uses an unordered list to create the menu. See here

当我翻译时使用Google的网站翻译菜单中断，如果翻译太长，导致浮动列表项下拉。

When I translate the website using Google translate the menu breaks if the translations are too long, causing the floated list items to drop down. Translating it into French seem to cause the problem.

请参阅此处

如果菜单太长，有没有办法强制文本换行？

Is there a way I can force the text to wrap if it is too long for the menu?

我不介意如果我必须将无序列表更改为其他值，但我不想使用表。

I don't mind if I have to change the unordered list to something else, but I would prefer not to use a table.

推荐答案

简短版本：我们将使用 display：table-cell 。

The short version: we're going to use display: table-cell.

长版本为.. long：

The long version is.. long:

• 在 .access ，删除 padding 规则。


• 在 .sf-菜单 ，删除 float：left 并添加 display：table 。


• code> .sf-menu li ，删除 float：left 并添加 display：table-cell 和 vertical-align：middle 。


• #header 和 #footer ，添加 position：relative 。


• code> .access ，删除 height：32px 和 margin-top：-32px 并添加 position：absolute 和 width：100％。


• #header .access ，添加 bottom：0 。


• border-left 从 sf菜单a 到 sf菜单li c。


• 将选择器 .sf-菜单a.first 更改为 .sf-菜单。 。


• 这部分不太好，但要回到 20px padding 在左边（和右边），在开头添加一个额外的 li ：< li class = noHoverstyle =width：20px; border-left：0>& nbsp;< / li> ;结尾：< li class =noHoverstyle = ; border-left：0>& nbsp;< / li> 您可能不需要& nbsp; 需要使用 #footer 做同样的事情。



• 停止：hover c> $ 上添加如下内容：

• On .access, remove the padding rule.
• On .sf-menu, remove float: left and add display: table.
• On .sf-menu li, remove float: left and add display: table-cell and vertical-align: middle.
• On #header and #footer, add position: relative.
• On .access, remove height: 32px and margin-top: -32px and add position: absolute and width: 100%.
• On #header .access, add bottom: 0.
• Move the border-left from sf-menu a to sf-menu li.
• Change the selector .sf-menu a.first to .sf-menu .first.
• This part isn't great, but to get back that 20px padding on the left (and right), add an extra li at the start: <li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li>; and at the end: <li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li>. You might not need the  s. You'll need to do the same thing with #footer.

• To stop the :hover on the "padding" lis, add something like this:

.sf-menu li.noHover:hover {
    background: none !important
}

/ li>

在 #footer 上，添加 padding-top：48px 。

On #footer, add padding-top: 48px.

这是一切（除非我在某处搞砸了），除了如果你想要的话，你将不得不把我的修复应用（可以在一个临时的新文件夹，如果你喜欢）一个新的版本。尝试修复IE6 / 7太多的工作，当我有应用所有这些更改以正确测试。

That's everything (unless I screwed up somewhere), except for IE6/7 support. If you want that, you're going to have to put a new version up with my fixes applied (can be in a temporary new folder if you like). It's too much work to attempt to fix IE6/7 when I have to apply all those changes first to test it properly.

这篇关于允许文本在css菜单中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！