使<ul>适应<li>链接的宽度

Question

我有一个带有 overflow-x:scroll; 的 div，里面有一个列表，这个列表包含一些链接。但是我似乎无法使我的列表宽度与其链接一样宽。这导致我的链接换行。

我该如何修复这个问题？

我的 html 代码：

<div class="menu">
    <ul>
        <li>
            <a href="#">a long text that jumps lines</a>
        </li>
        <li>
            <a href="#">a line that don't jump</a>
        </li>
    </ul>
</div>

我的CSS

.menu{
   width:400px;
   overflow-x:scroll;
}

- Michael Tot Korsgaard

Answer 1

当你说 Which results in my links jumping lines 我猜你的链接会换行，那么你可以使用这个属性来避免这种情况：

当您说“导致我的链接跳行”时，我猜测它是在新的一行中断开的，那么您可以使用此属性来避免这种情况：

.menu ul li {
   white-space:nowrap;
}

同样为了让您的ul占满整个width，需要改变它的显示属性：

.menu ul {
   display:inline-block;
}

这个演示 http://jsfiddle.net/5KSaM/7/

- DaniP