在网页布局中，当内部元素的宽度总和超过外层容器的宽度时，为了避免内容溢出破坏整体布局，我们通常需要给容器添加横向滚动条。下面介绍两种常用的CSS实现横向滚动条的方式，附带完整代码实例。
方式一：使用overflow-x属性实现
这种方式是最基础的实现思路，核心是通过设置容器的overflow-x: auto或者overflow-x: scroll，让容器在水平方向内容溢出时自动出现滚动条。同时需要保证内部元素的宽度总和超过容器宽度，才能触发横向滚动。
实现步骤如下：
- 给外层容器设置固定宽度，同时设置
overflow-x: auto，隐藏垂直方向溢出内容可以搭配overflow-y: hidden - 内部元素设置为行内块元素或者浮动元素，让它们横向排列，总宽度超过容器宽度
完整代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow实现横向滚动条</title>
<style>
.scroll-container {
width: 500px;
height: 120px;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #ccc;
padding: 10px;
}
.scroll-item {
display: inline-block;
width: 150px;
height: 100px;
margin-right: 10px;
background-color: #f0f0f0;
text-align: center;
line-height: 100px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scroll-item">内容1</div>
<div class="scroll-item">内容2</div>
<div class="scroll-item">内容3</div>
<div class="scroll-item">内容4</div>
<div class="scroll-item">内容5</div>
</div>
</body>
</html>方式二：使用flex布局配合overflow实现
这种方式更适合现代弹性布局场景，通过flex布局让内部子元素横向排列，不需要设置子元素为行内块或者浮动，只需要给外层容器设置flex相关属性和横向溢出滚动即可。
实现步骤如下：
- 外层容器设置固定宽度，开启flex布局，设置
display: flex，同时设置overflow-x: auto - 给flex子元素设置
flex-shrink: 0，防止子元素被容器压缩，保证子元素宽度不被缩小，从而总宽度超过容器触发滚动
完整代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex实现横向滚动条</title>
<style>
.flex-scroll-container {
width: 500px;
height: 120px;
display: flex;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #ccc;
padding: 10px;
}
.flex-scroll-item {
flex-shrink: 0;
width: 150px;
height: 100px;
margin-right: 10px;
background-color: #e8f4ff;
text-align: center;
line-height: 100px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="flex-scroll-container">
<div class="flex-scroll-item">内容1</div>
<div class="flex-scroll-item">内容2</div>
<div class="flex-scroll-item">内容3</div>
<div class="flex-scroll-item">内容4</div>
<div class="flex-scroll-item">内容5</div>
</div>
</body>
</html>两种方式的对比
我们可以通过下面的表格对比两种实现方式的特点，方便根据场景选择：
| 实现方式 | 核心属性 | 适用场景 | 注意事项 |
|---|---|---|---|
| overflow-x方式 | overflow-x: auto, display: inline-block | 传统布局，子元素需要横向排列的场景 | 子元素需要设置为行内块或者浮动，避免被换行 |
| flex布局方式 | display: flex, flex-shrink: 0, overflow-x: auto | 弹性布局场景，需要灵活控制子元素排列 | 必须给子元素设置flex-shrink: 0，否则子元素会被压缩无法触发滚动 |
实际开发中可以根据项目的布局方式选择合适的实现方案，两种方式都能稳定实现横向滚动条效果，兼容性也都能覆盖主流浏览器。
CSS横向滚动条overflowwhite-spaceflex布局修改时间：2026-06-07 02:44:13