単線スクロールHTMLリスト

リストを次のように使用します。単線スクロールHTMLリスト

<ul id="scroller"> 
    <li><img src="../static/image/brand1.png" title="brand title"></li> 
    ..... 
</ul>

CSSプロパティを使用します。

ul#scroller li { 
     list-style: none; 
     display: inline; 
    } 

    ul#scroller li img{ 
     margin-left: 75px; 
     float:left; 
    } 

    ul#scroller { 
     overflow: scroll; 
    }

この定義の直前にYUI CSSがリセットされます。

問題は次のとおりです。横スクロールの代わりに、私のリスト項目は改行です。

平和

出典

2012-04-07 xarion

あなたはここで、あなたがビーカーの2つの行を取得する可能性がある場所のような意味ですか？ http://jsfiddle.net/userdude/YMDCw/ –

正確には、ちょっとだけリスト項目を追加してください。彼らは '水平に'オーバーフローする必要がありますが、彼らは改行しています。 – xarion

私は実際にフロートを設定しようとします：私はこれの明白な理由を見ることはできませんが、リに直接左： – mkk

"white-space：nowrap;"を追加できます。 ul＃scroller要素に渡します。

http://jsfiddle.net/YMDCw/7/

ul#scroller{ 
    white-space:nowrap; 
} 
ul#scroller li { 
    list-style: none; 
    display: inline; 
} 

ul#scroller li img{ 
    margin-left: 75px; 
} 

ul#scroller { 
    overflow: scroll; 
}

出典

2012-04-07 22:24:35 ralgh

hooray！ nowrapは欠けていた部分だった..ありがとう。 – xarion

@ xatanian、要素を折り返さないように強制することは、完璧な方法ではありません – Starx

なぜそうですか？ – xarion

私はあなたがこのようなCSSをしたいと思いますか？

ul { 
    height: 150px; 
    width: 300px; 
    overflow: auto; 
    overflow-y: hidden !important; 
    overflow-x: scroll !important; 
} 

li { 
    list-style: none; 
    min-width: 800px; 
} 

img { 
    list-style: none; 
    display: inline-block; 
    float: left !important; 
}

出典

2012-04-07 22:38:11 Scriptor

単線​​スクロールHTMLリスト

答えて

関連する問題

単線スクロールHTMLリスト