css - 如何自动制作 div 大小，但防止它在窗口边缘破裂？

Question

我有一个纯 CSS 翻转菜单，在翻转时显示子导航。我希望这个子导航的宽度是显示内容所需的任何宽度（即我不想在 CSS 中硬编码宽度）。但是，如果我不在 CSS 中硬编码宽度，则 div 会在窗口边缘附近中断并且内容会换行。如果我确实设置了宽度，我会得到想要的效果（除了 div 是硬编码大小）并且内容不会换行，它只是扩展。有没有办法两者兼得？

Answer 1

DIVs don't break. Unordered lists break. Content inside lists break, but divs without set width always take up the entire width of the page (before adjusting for margins).

What you want is to keep the content in the div from wrapping, which can be done with:

 #navItem {
   white-space: nowrap;
 }

There are more complicated ways of having dynamic widths using min- and max-width, or by using javascript, but neither is consistent across browsers.

Answer 2

您可能想查看 Superfish，尤其是带有“Supersubs”的选项，http ://users.tpg.com.au/j_birch/plugins/superfish/#sample5

它会自动将子导航项调整为内容的宽度。