長すぎると画面幅に合わせてインラインulディスプレイを水平に切り捨てる方法

水平に表示される順序付けられていないリストを作成しようとしています。私はその部分を働かせました。長すぎると画面幅に合わせてインラインulディスプレイを水平に切り捨てる方法

次のように、リスト内で（つまり、画面全体に表示するにはあまりにも多くの）項目が次の行に折り返されることはありませんが、切り捨てられます。私は画面の大きさが大きすぎてもその幅が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>

[OK]を、ので、それはクールである水平に表示されますが、私は切り捨てビットが仕事を得るのに苦労しています。次の行に折り返しを続けます。

誰でもこの方法を知っていますか？

出典

2012-04-15 AnonyMouse

スクリプトに追加します。

#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 
}

here's a demo

出典

2012-04-15 09:18:22 Joseph

閉じるを使用することができ、それは1行でそれを取得しますが、doesnのだと思いますそれを切り捨てる。ブラウザウィンドウにはスクロールバーがあり、残りの部分を見るためにスクロールします。 – AnonyMouse

ええと、それはデモでクリップします。私はChromeを使用しています。 – Joseph

デモにはスクロールバーはありませんが、実際にブラウザで開くと表示されます。 – AnonyMouse

私が代わりにインラインを使用してのあなたはインラインブロック

#navlist li 
{ 
display: inline-block; 
list-style-type: none; 
padding-right: 20px; 
overflow-x:hidden; 
}

出典

2012-04-16 13:25:26 NavNeo

長すぎると画面幅に合わせてインラインulディスプレイを水平に切り捨てる方法

答えて

関連する問題