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

インラインを使用する代わりに、インラインブロックを使用できると思います

#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 に答える