如何自动设置 div 大小,但又不让它在窗口边缘破裂?

发布于 2024-07-29 02:09:08 字数 187 浏览 6 评论 0原文

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

I have a pure CSS rollover menu that displays a sub nav on rollover. I would like the width of this sub nav to be whatever it needs to be for the content to display (i.e. I do not want to hard code a width in the CSS). However, if I don't hard code a width in the CSS, the div breaks near the edge of the window and the content wraps. If I do set a width, I get the desired effect (except that the div is a hard coded size) and the content doesn't wrap, it just extends. Is there a way to have both?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

陈甜 2024-08-05 02:09:08

DIV 不会损坏。 无序列表被破坏。 列表内的内容会中断,但没有设置宽度的 div 始终占据页面的整个宽度(在调整边距之前)。

您想要的是保持 div 中的内容不换行,这可以通过以下方式完成:

 #navItem {
   white-space: nowrap;
 }

使用最小和最大宽度或使用 javascript 来实现动态宽度有更复杂的方法,但这两种方法在浏览器之间都不一致。

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.

流星番茄 2024-08-05 02:09:08

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

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

You might want to look at Superfish, especially the option with "Supersubs", http://users.tpg.com.au/j_birch/plugins/superfish/#sample5

It automatically adjusts the subnav item to the width of the contents.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文