用父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的{​​{1}} - 属性和#toolbar列表设置为#toolbar ul：

inline-block

我希望它有所帮助...

编辑：你说“紧紧包裹”。你在toolbar-div中有一个填充。因此，如果您确实想让它与外部div没有空格，请删除行#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; } 。

Answer 2

#toolbar {
  float: left;
}

这将围绕其内容“缩小”.toolbar。在clear: both;后面你需要另一个元素，这样如果你不想要它，你就不会让元素与.toolbar的右边对齐。