css横向滚动文字代码 |css 下一个节点

.container {
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.item {
display: inline-block;
margin-right: 10px;
}

上述代码包含两个部分，分别是容器和内容。容器即滚动区域，通过设置白色间隔和x轴滚动使其成为横向滚动效果。而内容部分则是每一个滚动的单元。单元要求以行内块的形式呈现，同时要留有适当的间距。

在HTML中可按照以下格式使用：

<div class="container">
<div class="item">滚动的文字1</div>
<div class="item">滚动的文字2</div>
<div class="item">滚动的文字3</div>
<div class="item">滚动的文字4</div>
</div>

其中container和item是自定义类名，用户可自行替换。item下的每一项文字均可自定义。

需要注意的是，该代码不兼容IE低版本浏览器。同时，iOS版本需要5.0以上才能支持，安卓版本则需要4.2以上。

在实际使用中，可以把这种横向滚动文字运用在新闻头条、商品展示等地方。相信能够给用户带来更多的视觉冲击力。