固定位置的工具箱答案

【问题标题】：Toolbox with fixed position固定位置的工具箱
【发布时间】：2017-01-09 06:22:23
【问题描述】：

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

#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>

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

【问题讨论】：

标签： html css css-position vertical-alignment

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：