4

私は困惑しています。固定幅のコンテナー内に収まる一連のアイコンを作成しようとしています。要素は親コンテナー内にある必要がありますが、親の右の境界線に達したときに改行ではなく、境界を超えて拡張する必要があります。

Floated li 要素を使用しています

ここにフィドルがあります

こんな感じにしたいです。

ここに画像の説明を入力

これではない：

ここに画像の説明を入力

助けてくれてありがとう。

コードは次のとおりです。

<div class="mainFooter">
<div class="iconContainer">
    <ul class="nav nav-pills">
        <li rel="tooltip" data-original-title="Services"><a class="icon-th-list icon-white">A</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">B</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Clients"><a class="icon-group icon-white">C</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Reports"><a class="icon-dashboard icon-white">D</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Preferences"><a class="icon-cogs icon-white">E</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">F</a>
        </li>
        <li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">G</a>
        </li>
    </ul>
</div>


 .mainFooter {
    background: #dddddd;
    position: relative;
    height: 40px;
    width:30%;

    }
.iconContainer {
    position: absolute;
    width: 100%;
    border:1px solid red;
    top:5px;
}
.mainFooter .nav > li{
    float:left;
}
.mainFooter .nav > li > a {
    padding:0px;
    margin: 1px;
    height:25px;
    width:30px;
    background:#2f65bb;
    color: #ffffff;
    font-size: 130%;
    line-height: 25px;
    display: inline-block;
    text-align:center;
}
4

2 に答える 2

16

.white-space: nowrapで<ul>。要素をフロートせずに、display: inline-block.

http://jsfiddle.net/nJydR/3/

于 2013-02-16T04:50:06.320 に答える
0

.nav-pillsのような固定幅を設定しようとするかもしれません

.nav-pills {
  width: 230px;
}

http://jsfiddle.net/nJydR/4/

于 2013-02-16T04:52:17.190 に答える