HTML CSS水平滾動

Question

我想滾動水平滾動時有很多article，而不是讓他們跳下去。所以我希望它能夠滾動，以便您可以看到其餘的內容。但它不起作用。

段：

#latest { 
 
    background: #eee; 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #ccc; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    height: 150px 
 
} 
 
article { 
 
    width: 250px; 
 
    height: 150px; 
 
    background: #ccc; 
 
    margin-right: 30px; 
 
    float: left 
 
}

<div id="latest"> 
 
    <div id="wrapper"> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    </div> 
 
</div>

Answer 1

讓您的文章display:inline-block代替float:left，並設置包裝是white-space:nowrap像這樣：

http://jsfiddle.net/andyfurniss/tobrbf7q/

Answer 2

您可以使用display: table和dislay: table-cell。這裏的技巧是使用table-layout: fixed; width: 100%這實際上迫使表儘可能多的增長，因爲它的內容：

#latest { 
 
    overflow: auto; 
 
} 
 
#wrapper { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border-spacing: 30px 0; 
 
    background: #EEE; 
 
} 
 
article { 
 
    display: table-cell; 
 
    width: 250px; 
 
    height: 150px; 
 
    background: #CCC; 
 
}

<div id="latest"> 
 
    <div id="wrapper"> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    </div> 
 
</div>

Answer 3

#latest{ 
 
background: #eee; 
 
border-bottom: 1px solid #ccc; 
 
border-top: 1px solid #ccc; 
 
overflow-x: scroll; 
 
overflow-y: hidden; 
 
height: 150px 
 
} 
 

 
#wrapper { 
 
white-space:nowrap; 
 
} 
 

 
article{ 
 
width: 250px; 
 
height: 150px; 
 
background: #ccc; 
 
margin-right: 30px; 
 
display: inline-block; 
 
}

<div id="latest"> 
 
    <div id="wrapper"> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    <article></article> 
 
    </div> 
 
</div>

Answer 4

從@Andy Fumiss的回答獲得靈感，我整合了一些改進：

display:inline-block有一點缺點，因爲由於代碼縮進而產生的空格會影響空格字符。

爲了顯示這種效果，我slightly edit his example減少保證金權分離，只有5px和避免前兩個article標籤的HTML代碼indentantion。

正如您所看到的，第一個邊距小於以下值，因爲從第二個邊界開始，有5px +空格。

爲了避免這種意外的行爲，您可以在容器設置font-size:0，然後在內容恢復其原來的價值，就像在this updated example

這裏，改變的代碼相關部分：

HTML：

<div id="latest"> 
    <div id="wrapper"> 
     <article></article><article></article> 
     <article></article> 
     ... 
    </div> 
</div> 

CSS：

#wrapper { 
    ... 
    font-size:0; 
} 

article { 
    ... 
    font-size:13px; 
} 

Answer 5

您可以使用display：inline-block的白色空間：NOWRAP

#latest { 
overflow-x: scroll; 
overflow-y: hidden; 
height: 80px; 
white-space:nowrap 
} 
article{ 
box-shadow: 1px 1px 10px #999; 
margin: 2px; 
max-height: 150px; 
cursor: pointer; 
display:inline-block; 
*display:inline;/* For IE7*/ 
*zoom:1;/* For IE7*/ 
vertical-align:top; 

}