用父div紧紧包装多个子div [英] Tightly wrap multiple child divs with a parent div

问题描述

我想用一个外部div紧紧包装一些div，使得外部div的大小增加更多的内部div。现在，父div只是填充100％的宽度，这是不正确的。

I want to tightly wrap some divs with an outer div, such that the outer div resizes with the addition of more inner divs. Right now, the parent div just fills 100% width, which isn't quite right.

以下是一些代码和小提琴 ：

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

推荐答案

c> display #toolbar ul 显示外部div #toolbar 到 inline-block ：

Set the display-attribute of the outer div #toolbar and the list #toolbar ul to 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;
}

我希望它有帮助...

I hope it helps...

EDIT ：你说紧包装。你在toolbar-div中有一个padding。所以如果你真的想要它没有向外div的空间，删除 padding：5px 。

EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px.

这篇关于用父div紧紧包装多个子div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！