如何增加寬度：使用純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

我看到你的小提琴，雖然我不確定這是你需要的確切效果，試試這個：

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

Answer 2

將默認填充設置為0，並將懸停填充設置為每側10px，如此處所示。

工作演示： 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;
}