CSS僅內聯滾動

對於添加到contatiner div「inlineExample」的每篇文章，目標是它們加載到右側，沒有垂直溢出，但動態地CSS可以處理添加到右側的每個附加文章。CSS僅內聯滾動

<div id="inlineExample"> 
    <article>block 1</article> 
    <article>block 2</article> 
    <article>block 3</article> 
    <article>block 4</article> 
</div>

目標將是

塊1塊2塊3塊4

所有內嵌在X方向溢出，具有低於沒有在Y方向上。舉例的jsfiddle： http://jsfiddle.net/fmbe6/

任何解決方案是值得歡迎的，我currenlt在ASP.NET MVC開發。

來源

2014-04-26 IntriquedMan

你希望它是這樣？[鏈接]（http://jsfiddle.net/fmbe6/） –

這是我提供的相同鏈接。要編輯/更新jsfiddle到一個新的URL點擊保存按鈕。 – IntriquedMan

對不起:) [鏈接]（http://jsfiddle.net/fmbe6/7/） –

試試這個：http://jsfiddle.net/fmbe6/4/

即：爲你的文章，你想：

article { 
    /* other properties */ 
    display: inline-block; /* not float */ 
} 

.container { 
    overflow-x: scoll; 
    overflow-y: hidden; 
    border: 1px solid #000; 
    border-radius: 5px; 
    white-space: nowrap; 
}

來源

2014-04-26 06:16:02 EyasSH

很多appeciated。 – IntriquedMan

CSS屬性溢出：汽車或滾動;

來源

2014-04-26 06:16:45

我認爲這還不夠。除了溢出屬性，你應該使用'white-space：nowrap'，可能'display：inline-block'而不是'float：left'。 – EyasSH

他可以像做一個div一樣，並將寬度定義爲100％，然後對所有文章進行寬度修正，例如，如果有4個寬度：25％，然後向左浮動，則全部將成爲一行或如您所說顯示內聯和如果他想使滾動只在一側顯示，那麼請使用overflow-x：hidden或overflow-y：hidden將會實現他的目標 –

這裏是不言而喻的FIDDLE

你的CSS更改爲：

#inlineExample { 
    width: 100%; 
    background: #fff; 
    overflow-x: scroll; 
    border: 1px solid #000; 
    border-radius: 5px; 
    white-space: nowrap; 
} 

#inlineExample>article { 
    display:inline-block; 
}

來源

2014-04-26 06:22:00 Matheus

CSS僅內聯滾動

回答

相關問題