Javascript 仅限CSS内联滚动

对于添加到contatiner div“inlineExample”中的每一篇文章，目标是它们加载到右侧，并且没有垂直溢出，但是css可以动态地处理添加到右侧的每一篇文章

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

欢迎使用我目前正在ASP.NET MVC中开发的任何解决方案。
尝试以下方法：

即：对于您的文章，您需要：

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;
}

css属性溢出：自动或滚动
 这里是

将CSS更改为：

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

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

你希望它是这样吗？这是我提供的相同链接。要将JSFIDLE编辑/更新为新的url，请单击“保存”按钮。对不起：）我认为这还不够。除了溢出属性之外，你应该使用
whitespace:nowrap
和可能的
display:inline block
而不是
float:left
。他可以用两种方法，比如做一个div，将宽度定义为100%，然后对所有文章进行宽度固定，比如如果有4个，那么宽度：25%，然后向左浮动，那么所有内容都是一行，或者如你所说的display如果他想让卷轴只在一边可见，那么使用overflow-x:hidden或overflow-y:hidden将实现他的目标