如何增加宽度:使用纯CSS将自动DIV的宽度增加X像素 [英] How to increase an width:auto DIV's width by X pixels using pure CSS

问题描述

我有一个 DIV (设置为 float:left )，其 width 设置为 auto ，因为我希望它与内容一样宽.

I have a DIV (that is set to float:left) that has its width set to auto because i want it to be just as wide as its contents.

在悬停上，我想将 DIV 的 width 增加20个像素.

On hover, i would like to increase width of the DIV by say, 20 pixels.

在:hover CSS类中设置固定的 width 时，容器将在悬停时获得该 width ，但是

When setting a fixed width in the :hover CSS class, the container will get that width on hover, but

1. CSS3转换将不适用/不起作用(在Firefox 15.0.1中进行了测试)
2. 如果我的 DIV 的内容大于固定的 width ，则最终的 width 将不正确.

1. CSS3-Transitions won't apply/work (tested in Firefox 15.0.1)
2. If my DIV's contents are larger than that fixed width, the final width will not be correct.

如何-在不使用JavaScript的情况下-如何将 DIV 的内容调整为适合其内容，并使其在悬停时将宽度增加一定数量的像素?

How - without the usage of javascript - can i keep the content of the DIV adjusted to its content, and have it increase that width by a certain amount of pixels on hover?

在这里查看我的JSFiddle.

推荐答案

我看过你的小提琴，尽管我不确定这是否是您需要的确切效果，请尝试以下操作:

I saw your fiddle, though I'm not sure this is the exact effect you need, try this:

.myDiv:hover {
    padding-right: 20px; 
}

这篇关于如何增加宽度:使用纯CSS将自动DIV的宽度增加X像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！