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; 

}