问题描述
我有一个使用无序列表创建菜单的模板。
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.
推荐答案
简短版本：我们将使用 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"> </li>; and at the end: <li class="noHover" style="width: 20px; border-left: 0"> </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菜单中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！