我的一位同事正在研究 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?
发布评论
评论(1)
只要不在 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.