автоматическая настройка ширины perant div на сумму его дочерней ширины

#css

Вопрос:

Я хочу, чтобы ширина элемента SearchBox div была суммой всех его дочерних элементов. В настоящее время я рассчитал с помощью javascript.

Есть ли какой-либо способ, которым его можно установить автоматически с помощью css.

Может ли кто-нибудь поделиться, если это возможно.

 <div class="searchBoxHolder">
    <div class="searchBox">
        <div class="searchBoxElem">#BANANA</div>
        <div class="searchBoxElem">Grapes</div>
        <div class="searchBoxElem">fruit</div>
        <div class="searchBoxElem">mango</div>
    </div>
</div>

http://jsfiddle.net/3nath/UdY6k/

Ответ №1:

Не добавляйте ширину в оболочку и не меняйте ее отображение на inline-block JSFiddle

Примечание на будущее: чтобы удалить один пробел между плавающими элементами, добавьте </div><div class='searchBoxElem'> или используйте размер шрифта 0 пикселей для оболочки

1. Это хорошо .. за исключением того, что я бы полностью избавился от поплавков и также использовал .searchBoxElem как «встроенный блок» .. плюс вы можете использовать пробел: nowrap, чтобы сохранить все элементы в одной строке независимо от ширины контейнера.

2. На самом деле в моем требовании ширина searchBoxHolder [wrapper] будет фиксированной, а ширина SearchBox должна варьироваться в зависимости от ширины дочерних элементов.

3. @user2810999 так оно и есть. Поскольку вы не указываете .searchBox ширину и не делаете ее inline-box , она займет столько же места, сколько и внутренние элементы.

Ответ №2:

замените свой css этим, это может быть лучше для вас

 .searchBoxHolder {
    border: 1px solid;
    display: inline-block;
    padding: 5px;
}


.searchBoxElem {
    display: inline-block;
    margin: 5px;
    padding: 2px 2px 2px 2px;
    cursor: pointer;
    background-color: rgb(251, 238, 203);
}