固定位置工具箱

Question

我正在尝试使用以下代码片段创建一个位置固定的工具箱。

#controls {
  position: absolute;
  bottom: 0;
  height: 60px;
  background: grey;
  opacity: 0.8;
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
  height: 10%;
  max-height: 60px;
  width: 100%;
  max-width: 300px;
}
.separator {
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  height: 90%;
  position: inherit;
  bottom: 5%;
}
#chalk-color,
#thickness,
#board-color,
#eraser,
#about {
  width: 18%;
  height: 100%;
  max-height: 60px;
  padding: 0;
  margin: 0;
  border: 1px solid black;
}

<div id="controls">
  <input type="color" id="chalk-color" />
  <span class="separator"></span>
  <input type="color" id="board-color">
  <span class="separator"></span>
  <input type="button" id="eraser" value="Erase">
  <span class="separator"></span>
  <input id="thickness">
  <span class="separator"></span>
  <span id="about">About</span>
</div>

如您在代码片段中所见，我试图将所有工具的高度设置为 100%。但是，工具以不同的大小和不同的对齐方式出现。为什么会出现这个问题？我该如何解决这个问题？

Answer 1

现在您的工具栏是 inline - 将它们设为 display: inline-block 和 vertical-align 就可以了！

#chalk-color,
#thickness,
#board-color,
#eraser,
#about {
  width: 18%;
  height: 100%;
  max-height: 60px;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}

让我知道您对此的反馈。谢谢！

#controls {
  position: absolute;
  bottom: 0;
  height: 60px;
  background: white;
  opacity: 0.8;
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
  height: 10%;
  max-height: 60px;
  width: 100%;
  max-width: 300px;
}
.separator {
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  height: 90%;
  position: inherit;
  bottom: 5%;
}
#chalk-color,
#thickness,
#board-color,
#eraser,
#about {
  width: 18%;
  height: 100%;
  max-height: 60px;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}

<div id="controls">
  <input type="color" id="chalk-color" />
  <span class="separator"></span>
  <input type="color" id="board-color">
  <span class="separator"></span>
  <input type="button" id="eraser" value="Erase">
  <span class="separator"></span>
  <input id="thickness">
  <span class="separator"></span>
  <span id="about">About</span>
</div>

Answer 2

行内元素（例如span）没有宽度、高度、内边距或外边距。将它们设置为 display: inline-block 以允许这些。

使用 vertical-align: middle 对齐中心而不是基线。

使用 box-sizing: border-box 确保它的高度为 100%，包括填充。

#controls {
  position: absolute;
  bottom: 0;
  height: 60px;
  background: white;
  opacity: 0.8;
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
  height: 10%;
  max-height: 60px;
  width: 100%;
  max-width: 300px;
}
.separator {
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  height: 90%;
  position: inherit;
  bottom: 5%;
}
#chalk-color,
#thickness,
#board-color,
#eraser,
#about {
  width: 18%;
  height: 100%;
  max-height: 60px;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  box-sizing: border-box;
  display: inline-block;
  vertical-align:middle;
}

<div id="controls">
  <input type="color" id="chalk-color" />
  <span class="separator"></span>
  <input type="color" id="board-color">
  <span class="separator"></span>
  <input type="button" id="eraser" value="Erase">
  <span class="separator"></span>
  <input id="thickness">
  <span class="separator"></span>
  <span id="about">About</span>
</div>

固定位置工具箱

Toolbox with fixed position

html

css

css-position

vertical-alignment