html - 如何使元素具有 float 而不是换行符并扩展到其父容器之外？

Question

我被难住了。我正在尝试制作一组​​位于固定宽度的容器内的图标。元素必须在父容器内，但必须超出边界，到达父容器的右边界时不能换行。

我正在使用 float li 元素

这是 fiddle

希望它看起来像这样。

不是这个:

感谢您的帮助。

代码如下:

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

Answer 1

.white-space: nowrap在 <ul> 上.不要 float 元素，而是使用 display: inline-block .

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