CSS:根据内容扩展浮动元素的宽度

发布于 2024-12-18 01:05:27 字数 428 浏览 1 评论 0 原文

我的一位同事正在研究 CSS 设计,其中包含一个无序列表(

    标记),其 >标签向右浮动。

每个列表项都包含一个

(非浮动),其中包含图像和段落。

当悬停在内部

上方时,其宽度会发生变化(使用 jQuery 动画效果)。

问题是,当

的宽度更改时,它会超出
  • 边界。
  • 一般来说,有没有办法根据浮动元素的内容元素的最大宽度来扩展或缩小浮动元素?

    A colleague of mine was working on a CSS design which contains an un-ordered list (<ul> tag) that has its <li> tags floated to right.

    Each list item contains a <div> (non-floating) which contains an image and a paragraph.

    The inner <div>'s width is being changed when hovering above it (using a jQuery animation effect).

    The problem is that when the <div>'s width is changed, it goes outside of the <li> bounds.

    Generally speaking, is there a way to expand or shrink a floating element based on its content elements' maximum width?

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

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

    发布评论

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

    评论(1

    梦罢 2024-12-25 01:05:27

    只要不在 LI 或 UL 上设置任何宽度,它就会扩展。浮动元素会自动“收缩包裹”其内容 - 除非通过设置高度或宽度另有明确要求。

    Just don't set any width on the LI or the UL and it will expand. Floated elements automatically "shrink-wrap" around their content - unless so specifically request otherwise by setting a height or width.

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