如何使用float而不是换行符并使其扩展到父容器之外？

Question

我很难过。我正在尝试制作一组​​位于具有固定宽度的容器内的图标。元素必须位于父容器内，但必须延伸到边界之外，并且当它们到达父级的右边界时不能换行。

我正在使用Floated 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>。不要浮动元素，而是使用display: inline-block。

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

Answer 2

您可以尝试为.nav-pills设置固定宽度，例如

.nav-pills {
  width: 230px;
}

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