css - 如何增加宽度：使用纯 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; 
}

Answer 3

将默认填充设置为 0 并将悬停填充设置为每侧 10 像素，如下所示。

工作演示：http: //jsfiddle.net/jfriend00/YWvTu/

.myDiv {
    float: left;
    width: auto;
    padding: 0;
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    -i-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.myDiv.alternative {
    width: 100px;
}
.myDiv:hover {
    padding: 0 10px;
}