javascript - 仅限 CSS 内联滚动

Question

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

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

目标是

区 block 1 区 block 2 区 block 3 区 block 4

所有内联都在 X 方向溢出，在 Y 方向没有下方。 Jsfiddle 的例子: http://jsfiddle.net/fmbe6/

欢迎任何解决方案，我目前正在使用 ASP.NET MVC 进行开发。

Answer 1

试试这个: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;
}