html - 缩小页面时菜单栏变形

Question

伙计们，我的菜单需要帮助。当我缩小页面时，它会失真。这是我的链接。我在 IE 上测试了这个链接，它很好，但是在 chrome 和 firefox 中缩放页面会扭曲菜单和下面的内容。

https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm#

Answer 1

div#text-contents继承了上面的 div float 属性。要删除它，您应该 Give clear:bothtodiv#text-contents它会正常工作。我建议您使用宽度百分比而不是像素。（没有必要）

Answer 2

看起来您已将每个菜单项放置在自己的ul容器中，如下所示：

<ul>
    <li>something</li>
</ul>
<ul>
    <li>something</li>
</ul>
<ul>
    <li>something</li>
</ul>

尝试使用一个带有多个 lis 的单个 ul

<ul>
    <li>something</li>
    <li>something</li>
    <li>something</li>
</ul>

然后你需要做一些 css 来让它们垂直对齐。这有点额外的工作，但这是正确的方法。否则，您将尝试修复最初被破坏的结构的外观。:)

这是一种方法：http: //jamesowers.co.uk/css-tutorials/10/vertical-list-menu/