我想实现下图所示的效果,即使用 CSS3
选择颜色。
当前代码为here .
.colors {
background: white;
width: 80%;
height: 10%;
position: absolute;
top: 60%;
display: inline-block;
overflow-x: scroll;
white-space: no-wrap;
}
.select {
float: left;
margin: 10px;
color: transparent;
z-index: 22;
background: red;
width: 20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
我制作的 div 没有显示。我能做些什么来解决这个问题?
最佳答案
您的 div 没有显示,因为您没有为它们设置任何 height
。你在这里也有一个语法错误 white-space: no-wrap
因为它应该是 white-space: nowrap
。
顺便说一句,您可以简单地使用 flex 而不是 float 元素。使用 flex 时,您不必指定元素的高度:
.colors {
background: white;
width: 80%;
height: 100px;
margin: auto;
display: flex;
flex-wrap: nowrap; /* this is not mandatory as it's the default value*/
overflow-x: scroll;
border: 1px solid;
}
.select {
margin: 10px;
color: transparent;
background: red;
flex: 0 0 20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
或者inline-block
解决方案。但是这里需要指定高度,注意溢出:
.colors {
background: white;
width: 80%;
height: 100px;
margin: auto;
overflow-x: scroll;
border: 1px solid;
white-space:nowrap;
}
.select {
margin: 10px;
color: transparent;
background: red;
display:inline-block;
height:calc(100% - 24px); /* You need to remove both margin and height of scroll*/
width:20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
关于html - 在父 div 中排列水平 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47483831/