2

我正在尝试制作一个水平显示的无序列表。我得到了那个部分的工作。

接下来，我想要它，这样无论列表中有多少项目（即太多而无法在屏幕上显示）它都不会换行到下一行，而是会被截断。我想要它，所以即使它对屏幕来说太大，它的宽度也会是 100%。我的意思是它不会导致浏览器有一个水平滚动条，允许您滚动查看其余数据。不适合屏幕的内容将被隐藏。

我想出了：

<html>
<head>
<style type="text/css">
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
overflow-x:hidden;
}

#rt, #divlist
{
overflow-x:hidden;
}
</style>

<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<li><a href="#">Item six</a></li>
<li><a href="#">Item seven</a></li>
<li><a href="#">Item eight</a></li>
<li><a href="#">Item nine</a></li>
<li><a href="#">Item ten</a></li>
<li><a href="#">Item eleven</a></li>
<li><a href="#">Item twelve</a></li>
<li><a href="#">Item thirteen</a></li>
<li><a href="#">Item fourteen</a></li>
<li><a href="#">Item fifteen</a></li>
</ul>

好的，所以它水平显示很酷，但我正在努力让截断位工作。它一直换到下一行。

有人知道怎么做吗？

4

2 回答 2

0

我认为您可以使用 inline-block 而不是使用 inline

#navlist li
{
display: inline-block;
list-style-type: none;
padding-right: 20px;
overflow-x:hidden;
}
于 2012-04-16T13:25:26.397 回答
0

添加到您的脚本中：

#navlist{
    width:100%;          //gives an explicit width for overflow:hidden to work
    overflow-x:hidden;   //overflows along the width
    white-space:nowrap;  //prevent children from wrapping
}

这是一个演示

于 2012-04-15T09:18:22.303 回答