html - 溢出-x 不工作 css
问题描述
我正在尝试创建一个简单的滚动父 div。其中子 div 应该水平堆叠。
但它不起作用。子 div 在 div 宽度结束后被包裹。请帮忙。
#outerContainer {
width: 100%;
height: 150px;
background: red;
overflow: hidden;
overflow-x: scroll;
}
.card {
float: left;
display: inline-block;
width: 100px;
height: 150px;
margin-right: 10px;
background: #fff;
}
<div id="outerContainer">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
解决方案
#outerContainer {
width: 100%;
height: 150px;
background: red;
overflow: hidden;
overflow-x: scroll;
white-space:nowrap;
}
.card {
display: inline-block;
width: 100px;
height: 150px;
margin-right: 10px;
background: #fff;
}
推荐阅读
- python - 他们向我显示错误“所有数组必须具有相同的长度”
- .net - 即使在登录时,邮件中的外部链接也会将我发送到登录页面
- flutter - Flutter 页面浏览导航
- python - groupby 的所有行的条件
- linux - 在非零退出时退出 bash 函数
- jquery-select2 - 重定向到另一个控制器函数会导致前端错误:TypeError: $(...).select2 is not a function
- selenium - Selenium Web 驱动程序和 csv 文件
- powershell - 使用 Powershell 显示存储在 Windows 文件夹中的电子邮件的附件大小
- android - 从 Wear 向手机发送数据
- java - Swagger2 - 更改示例值