Suckerfish 下拉菜单的流体宽度

发布于 2024-09-17 21:31:48 字数 252 浏览 7 评论 0原文

对于 CSS 下拉菜单,我通常坚持使用 Son of Suckerfish 下拉菜单。该技术效果非常好,但有一件小事一直困扰着我:下拉链接的宽度始终是固定的。

有什么方法可以自动调整 Suckerfish 下拉菜单中项目的宽度吗?如果没有,是否有其他基于 CSS 的下拉菜单策略可以实现此目的?

For CSS dropdown menus, I usually stick with the Son of Suckerfish dropdowns. The technique works extremely well, but there's one small thing that's always bothered me: the width of the dropdown links is always fixed.

Are there any ways to automatically resize the width of the items in a Suckerfish dropdown menu? If not, are there any other CSS-based dropdown menu strategies that can accomplish this?

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

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

发布评论

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

评论(3

随波逐流 2024-09-24 21:31:48

未必。如果您将辅助列表项设置为向左清除,那么它们将堆叠在一起。

但问题是,如果您想在悬停时更改背景颜色,则必须设置固定宽度,否则您将拥有不同宽度的列表项。

但如果您不必更改 BG 颜色,那么这是一个很好的方法,可以让事情保持流畅。

Not necessarily. If you set the secondary list items to clear left, then they will stack on top of each other.

The problem there however is that if you want to change the background color on hover you have to set a fixed width, or else you'll have list items of varying widths.

But if you don't have to change the BG color, it's a nice way to do it and keep things fluid.

演多会厌 2024-09-24 21:31:48

由于 li 元素在 ul 元素内浮动,因此它们需要具有等于 ul< /代码> 元素。否则,他们都会在同一条线上。固定宽度迫使每个人跳到下一行。

示例: http://jsfiddle.net/ZhguL/3/

如果您愿意,可以使用jQuery 或简单的 JavaScript 来计算每个 ul 中最长菜单项的宽度,并将每个 liul 的宽度设置为此这个值。

Because the li elements are floated inside the ul element, they need to have a set width that is equal to the ul element. Otherwise, they will all be on the same line. The fixed width forces each one to jump to the next line.

Example: http://jsfiddle.net/ZhguL/3/

If you want, you can use jQuery or just plain JavaScript to calculate the width of the longest menu item in each ul and set each li and the ul's widths to this this value.

云醉月微眠 2024-09-24 21:31:48

看看这个页面,它帮助了我。
不用js也可以做到。
http://www.pmob.co.uk/temp/dropdown-all -流体.htm

Take a look at this page, it helped me out.
You can do it without using js.
http://www.pmob.co.uk/temp/dropdown-all-fluid.htm

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