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

Question

我想用外部 div 紧紧包裹一些 div，这样外部 div 会通过添加更多内部 div 来调整大小。现在，父 div 仅填充 100% 宽度，这不太正确。

这是一些代码和一个 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-attribute设置为：#toolbar#toolbar ulinline-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