html - 在父 div 中排列水平 div

Question

我想实现下图所示的效果，即使用 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 没有显示。我能做些什么来解决这个问题？

Answer 1

您的 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>