html - 如何使元素具有浮动而不是换行符并延伸到其父容器之外？

Question

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

我正在使用浮动 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;
}

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/