用父 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的display-属性#toolbar和列表#toolbar ul为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;
}

希望对你有帮助……

编辑：您说的是“紧紧包裹”。您在工具栏-div 中有一个填充。因此，如果您真的希望它的外部 div 没有空间，请删除 padding:5px 行。

Answer 2

#toolbar {
  float: left;
}

这将“收缩包装”.toolbar 围绕其内容。您需要在 clear: both; 之后添加另一个元素，这样如果您不希望元素对齐到 .toolbar 的右侧，您就不会这样做。