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

#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 3

从@Andy Fumiss的回答中汲取灵感，我整合了一些改进：

display:inline-block有一点缺点，因为代码缩进造成的空格会影响空格字符。

为了显示这种效果，我slightly edit his example将边距权限分离减少到5px，并避免在前两个article标记的html代码中进行缩进。

如您所见，第一个边距小于跟随，因为从第二个边缘开始， 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 4

您可以使用display：inline-block with white-space：nowrap

$( "#accordion_video a" ).click(function( event ) {
  event.preventDefault();
});

}

HTML CSS滚动水平

4 个答案: