Как увеличить ширину: ширина автоматического DIV на X пикселей с использованием чистого CSS

у меня естьDIV (это установлено наплыть налево) это имеет своеширина установлен вавто потому что я хочу, чтобы он был таким же широким, как и его содержимое.

НазависатьЯ хотел бы увеличитьширина изDIV скажем, 20 пикселей.

При установке фиксированнойширина в: парить Класс CSS, контейнер получит этоширина при наведении, но

CSS3-переходы не будут применяться / работать (протестировано в Firefox 15.0.1)Если мойDIVсодержание больше, чем исправленоширина, финалширина не будет правильным.

Как - без использования JavaScript - я могу сохранить содержаниеDIV приспособлен к его содержанию, и увеличит ли он эту ширину на определенное количество пикселей при наведении?

Смотрите мой JSFiddle здесь.

 SquareCat14 окт. 2012 г., 02:53
Извините, забыл добавить ссылку. Сделано сейчас, хотя.
 jfriend0014 окт. 2012 г., 02:52
@AustinBrunkhorst - вопрос гласит «без использования javascript», а заголовок «используя чистый CSS».
 Austin Brunkhorst14 окт. 2012 г., 02:50
.css('width', '+=20')
 Alcides Queiroz Aguiar14 окт. 2012 г., 02:53
Можете ли вы опубликовать код в jsFiddle?

Ответы на вопрос(2)

а для наведения - 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;
}
 SquareCat14 окт. 2012 г., 02:59
Благодарю вас. Совершенно верно! alcidesqueiroz был на несколько секунд быстрее, но, пожалуйста, оставьте свой ответ для других пользователей, чтобы получить больше информации по этому вопросу.
Решение Вопроса

хотя я не уверен, что это именно тот эффект, который вам нужен, попробуйте это:

.myDiv:hover {
    padding-right: 20px; 
}
 SquareCat14 окт. 2012 г., 02:58
Абсолютно идеально!

Ваш ответ на вопрос