css 滚动公告栏 左右滚动

如果你想让网站更加生动，那么一些动态效果肯定是必不可少的，比如常见的滚动公告栏，就可以让重要的信息更加醒目，以便用户能够快速了解。

.marquee {
  display: flex;
  overflow-x: auto;
  white-space: Nowrap
}

.marquee p {
  padding-right: 30px;
  margin: 0
}

这是一个简单的CSS实现方法，首先需要给外部容器设置flex属性，然后横向滚动的部分设置overflow-x为auto，即可自动出现横向滚动条。同时，也需要设置white-space为Nowrap，这样才能保证内容横向排列。

接下来就是内部p标签的设置，需要使用padding-right来让各条信息之间有一定距离，而且margin也要设置为0，否则会出现间隔效果。

这样，一个简单的css滚动公告栏就可以实现了，当然，你也可以添加一些其他的效果或者样式，来让滚动公告栏更加丰富多样。比如可以设置每条信息的背景颜色或者其他特殊效果，这些都可以根据自己的需求来灵活设计。