Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css横向滚动条

作者:蓝梦月影   发布日期:2025-05-30   浏览:55

/* 设置一个容器,让其内容超出宽度时出现横向滚动条 */
.container {
  white-space: nowrap; /* 防止文本换行 */
  overflow-x: auto; /* 当内容超出容器宽度时显示横向滚动条 */
  width: 300px; /* 设置容器的宽度 */
  border: 1px solid #ccc; /* 添加边框以便观察效果 */
}

/* 示例中的内容项 */
.item {
  display: inline-block; /* 让每个项目在一行内排列 */
  padding: 10px;
  margin: 5px;
  background-color: #f1f1f1; /* 设置背景颜色 */
}

HTML 示例代码:

<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第几个元素

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 自定义滚动条

css flex gap

css上一个兄弟元素怎么找到

css文字超出隐藏变省略号鼠标上去展示完整

css文字不允许换行

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站