在網頁中，如何創建一個水平滾動而不是這個WAP到下一行的？

我有一大堆的信息的列看起來像這樣：在網頁中，如何創建一個水平滾動而不是這個WAP到下一行的？

<span style="width:280px;float:left"> 
    some stuff 
<span> 

<span style="width:280px;float:left"> 
    some stuff 
<span> 

<span style="width:280px;float:left"> 
    some stuff 
<span> 

<span style="width:280px;float:left"> 
    some stuff 
<span> 

etc . .

因爲人有不同的瀏覽器的寬度，如果一個人有一個小幅度的監視器，一些列的拉閘包裝的下一行。在這種情況下，我想要一個水平滾動條出現並保持所有內容在同一行上。這樣做的正確方法是什麼？

來源

2014-01-16 leora

的可能重複的[停止浮動的div從包裝]（HTTP：// stackoverflow.com/questions/5616360/stop-floating-divs-from-wrapping） – schellmax

只需將您的span元素的容器：

<div> 
    <span>...</span> 
    <span>...</span> 
    ... 
</div>

然後從span元素刪除float屬性，而不是將它們設置爲display爲inline-block，給您新的包含元素的nowrap一個white-space防止他們從墮落的新行：

div { 
    white-space: nowrap; 
} 

div span { 
    display: inline-block; 
    width: 280px; 
}

如果你真的堅持使用style屬性每個單獨的元件上（這是不好的做法），而不是包括CSS像我上面所使用的，這將等於：

<div style="white-space: nowrap;"> 
    <span style="display: inline-block; width: 280px">...</span> 
    <span style="display: inline-block; width: 280px">...</span> 
    ... 
</div>

來源

2014-01-16 10:29:39

我要發佈一個類似的答案。這裏有一個演示：http://jsfiddle.net/L8fXB/ – pawel

我覺得你應該解釋爲什麼你更換直列塊浮動。你的方法的一個缺點是你有跨度之間的空間大小的差距。 –

@MrLister，因爲'inline-block'元素是* inline *渲染的。浮動元素呈現爲*塊*，而不是內聯。空白屬性對非內聯元素沒有任何影響。爲了擺脫跨度之間的空白，有[可以完成的幾件事]（http://davidwalsh.name/remove-whitespace-inline-block）。 –

在網頁中，如何創建一個水平滾動而不是這個WAP到下一行的？

回答

相關問題