固定位置的工具箱

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

内联元素（例如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>

Answer 2

现在，您的工具栏为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>