html - 用父 div 紧紧包裹多个子 div

Question

我想用外部 div 紧紧包裹一些 div，这样外部 div 会随着添加更多内部 div 的大小而调整。现在，父 div 只填充了 100% 的宽度，这不太正确。

Here's some code and a Fiddle :

<div id="toolbar">
    <ul>
        <li><i class="icon-facebook-sign"></i></li>
        <li><i class="icon-twitter-sign"></i></li>
        <li><i class="icon-envelope-alt"></i></li>
        <li><i class="icon-cloud-upload"></i></li>
        <li><i class="icon-cog"></i></li>
    </ul>
</div>

---

#toolbar {
    overflow:hidden;
    padding:5px;
    background:#FFF;
    border-radius:5px;
    border:1px solid #AAA;
    margin-bottom:15px;
}
    #toolbar ul {
        overflow:auto;
        list-style:none;
        margin:0;
        padding:0;
    }
    #toolbar li {
        display:inline;
        padding:5px;
        background:#606c88;
        color:#FFF;
        font-size:24px;
        border-radius:5px;
    }

Answer 1

将外部 div #toolbar 和列表 #toolbar ul 的 display 属性设置为 inline-block:

#toolbar {
    overflow:hidden;
    padding:5px;
    background:#FFF;
    border-radius:5px;
    border:1px solid #AAA;
    margin-bottom:15px;
    display:inline-block;
}
#toolbar ul {
    overflow:auto;
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
}

希望对你有帮助

编辑:你说“紧紧包裹”。您在 toolbar-div 中有一个填充。因此，如果您真的想让它的外部 div 没有空间，请删除 padding:5px 行。