自动调整父div宽度为其子宽度的总和

Question

我想将searchBox div元素宽度作为其所有子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/

Answer 1

不要为包装器添加宽度并将其显示更改为inline-block JSFiddle

未来注释： 删除浮动元素之间的一个白步距离，添加</div><!-- --><div class='searchBoxElem'>，或使用0px font-size作为包装

Answer 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);
}