具有100％寬度的水平滾動條

我想要一些具有100％寬度的列表項目（浮動）。具有100％寬度的水平滾動條

的列表項目的數目是任意的，也可能是1或2，或者它可以是20或30。

當有更多的項目不能容納在頁面的100％的寬度，我希望它有一個滾動條滾動。

這是我目前使用的，但它不創建滾動。我猜我需要設置一個溢出寬度的工作，但我希望寬度爲100％。

.scroll {overflow-x:scroll;} 
.scroll li {float:left} 

<div class="scroll"> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
     <div stye="clear:both"></div> 
    </ul> 
</div>

那麼我怎樣才能保持100％的寬度，用水平滾動？

來源

2014-01-08 user2909486

可能重複問題]（http://stackoverflow.com/questions/17565422/background-css-100-width-horizontal-scroll-issue） – Cilan

[Horizontal Scrolling？]的可能重複（http://stackoverflow.com/questions/3574769/horizontal-scrolling） – CRABOLO

'overflow：scroll-x;'無效CSS - 'overflow-x ：scroll;'是，除了Firefox。目前規範很混亂，Mozilla玩的更嚴格，而IE和Webkit都支持單獨的X和Y定義。 –

添加white-space: nowrap到.scroll ul

.scroll {overflow:auto; } 
.scroll ul{ white-space: nowrap;} 
.scroll li {display: inline-block;}

JS小提琴：http://jsfiddle.net/f6CRt/

來源

2014-01-08 01:32:51

不要使用浮動的。浮動元素是塊級，並且白色空間：nowrap;，這將導致文本去關閉屏幕，僅適用於內聯元素 - 在這裏是一個possible duplicate of your question...

所以基本上使用：

.scroll { 
    display: block; 
    overflow: scroll; 
    white-space: nowrap; 
} 
.scroll li { 
    display: inline; 
}

Here's a fiddle

[背景CSS 100％的寬度水平滾動的

來源

2014-01-08 01:41:32 pizzasynthesis

具有100％寬度的水平滾動條

回答

相關問題