/* 设置一个容器,让其内容超出宽度时出现横向滚动条 */
.container {
white-space: nowrap; /* 防止文本换行 */
overflow-x: auto; /* 当内容超出容器宽度时显示横向滚动条 */
width: 300px; /* 设置容器的宽度 */
border: 1px solid #ccc; /* 添加边框以便观察效果 */
}
/* 示例中的内容项 */
.item {
display: inline-block; /* 让每个项目在一行内排列 */
padding: 10px;
margin: 5px;
background-color: #f1f1f1; /* 设置背景颜色 */
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
</div>
.container
类设置了 white-space: nowrap
,确保内部元素不会换行,并且当内容超出容器宽度时会触发横向滚动条。overflow-x: auto
表示当内容超出容器的宽度时,会自动显示横向滚动条。.item
类用于定义容器内的每个项目,使用 display: inline-block
确保它们在一行内排列。这样,当容器内的内容超出容器宽度时,用户可以通过滚动条来查看所有内容。
上一篇:css 偶数行变色
下一篇:css第几个元素
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站