我在包装器 div class="wrapper" 中有一个水平滚动条 class="filter_list"。我希望此滚动条始终占包装器 div 的 100%，并且我希望此包装器 div 能够响应。
如果我的过滤器列表中只有一个元素，它工作正常，但一旦我放置超过包装宽度大小，它就不再响应。
这里有一些图片可以说明问题:
react 灵敏，工作正常:
滚动条挡住了 wrapper 的宽度，wrapper 不会收缩以适应窗口的尺寸(我们可以看到女孩的图片不再是 100% 正方形大小):
代码如下:
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 800px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.magic_wand {
margin: 15px 0px 20px;
max-width: 50px;
}
.ico_magic_wand {
width: 100%;
height: 100%;
object-fit: contain;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.filter_list {
width: 100%;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}<body>
<div class="wrapper">
<div class="magic_wand">
<img src="img/ico/magic_wand.png" class="ico_magic_wand">
</div>
<div class="picture_preview">
<img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
</div>
<div class="filter_list">
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
</div>
</div>
</body>我想了解为什么 div class="filter_list" 宽度不会随着它的父 div 而缩小，同时减少窗口的宽度以及如何解决这个问题，非常感谢!
最佳答案
试试这段代码..我不明白你的问题..这可能是你的期望，否则请解释清楚..
CSS
.filter {
display: inline-block;
height: 150px;
width: 21.3%;
background-color: blue;
margin-right: 15px;
}
.filter:nth-child(4n+4) {
margin-right: 0px;
}
请删除您的 css 代码并添加此代码。我认为 display:flex;是你的代码的问题..
body {
margin:0px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
.magic_wand {
margin: 15px auto 20px;
max-width: 50px;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
height: 100%;
}
.filter_list {
width: auto;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
@media only screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
}
关于html - 如何使水平滚动条响应地适应 div 宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57787208/