如何使用纯 CSS 增加宽度：自动 DIV 的宽度 X 像素

Question

我有一个DIV（设置为float:left），它的宽度设置为auto因为我希望它和它的内容一样宽。

在悬停，我想增加宽度的的DIV的说，20个像素。

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

1. CSS3-Transitions 将不适用/工作（在 Firefox 15.0.1 中测试）
2. 如果我的DIV的内容大于该固定宽度，则最终宽度将不正确。

如何 - 在不使用 javascript 的情况下 - 我可以将DIV的内容调整为其内容，并在悬停时将宽度增加一定数量的像素吗？

在这里查看我的 JSFiddle。

Answer 1

对我来说，最简单的方法就是将内容增加到 100% 以上。例如：

width: 110%;

n但是如果您想按照要求增加像素大小，您可以使用

width: calc(100% + 50px);

Answer 2

我看到了你的小提琴，虽然我不确定这是否是你需要的确切效果，试试这个：

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