1

内側の 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;
    }
4

2 に答える 2

0

外側の 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ください。

于 2013-01-02T21:49:00.783 に答える
-1 
#toolbar {
  float: left;
}

これにより、コンテンツが「シュリンク ラップ」さ.toolbarれます。その後に別の要素が必要にclear: both;なるため、要素が必要ない場合は の右側に整列する.toolbarことはありません。

于 2013-01-02T21:53:30.750 に答える