Question

如果这个问题听起来很愚蠢，请原谅我，希望这对其他人有帮助。

我正在努力让我的按钮与给定的标签很好地对齐。不幸的是，我不是很成功，因为尽管有相同的高度和填充值，但各种元素并没有像我希望的那样在垂直平面上对齐。

我基本上做的是复制我的标签.resizedTextbox的CSS位并将它们粘贴到我的按钮button中。

是否有任何人有同样的问题或我在这里缺少什么？

.resizedTextbox {
  width: 40px;
  height: 20px;
  padding: 5px 5px 5px 5px;
  border-color: #3e12cc;
  text-shadow: 0px 1px 1px #154682;
  background-color: #f5effb;
  vertical-align: text-top;
  text-align: center;
  font-size: 18px;
}

.button {
  border-radius: 3px;
  background-color: blue;
  border: none;
  color: white;
  padding: 5px 5px 5px 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 80px;
  height: 20px;
  letter-spacing: 2px;
  font-size: 18px;
}

<div id="section">
  <h2>Trying to align buttons and label</h2>
  <div id="home_automation_tab">
    <p></p>
    <td class="tablerows"><input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly>
      <button class="button">Off</button>
      <button class="button">30%</button>
      <button class="button">50%</button>
      <button class="button">80%</button>
      <button class="button">On</button>
  </div>
</div>

Answer 1

尝试使用 Flexbox

也无需撰写padding: 5px 5px 5px 5px ...如果top，right，bottom，left的值相同，则只需使用padding: 5px。

并从代码中删除<td class="tablerows">。此处不需要

#home_automation_tab {
  display: flex;
}

.resizedTextbox {
  width: 40px;
  padding: 5px;
  border-color: #3e12cc;
  text-shadow: 0px 1px 1px #154682;
  background-color: #f5effb;
  text-align: center;
  font-size: 18px;
}

.button {
  border-radius: 3px;
  background-color: blue;
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  width: 80px;
  letter-spacing: 2px;
  font-size: 18px;
  margin-left: 5px;
}

<div id="section">
  <h2>Trying to align buttons and label</h2>
  <div id="home_automation_tab">
    <p></p>
    <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly>
    <button class="button">Off</button>
    <button class="button">30%</button>
    <button class="button">50%</button>
    <button class="button">80%</button>
    <button class="button">On</button>
  </div>
</div>

此外，您的代码在编写时工作正常..您需要对box-sizing: border-box和button使用label并尝试更改高度值，以便内容获得可见

.resizedTextbox {
  width: 40px;
  height: 30px;
  padding: 5px;
  border-color: #3e12cc;
  text-shadow: 0px 1px 1px #154682;
  background-color: #f5effb;
  vertical-align: top;
  text-align: center;
  font-size: 18px;
  box-sizing: border-box;
}

.button {
  border-radius: 3px;
  background-color: blue;
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 80px;
  height: 30px;
  letter-spacing: 2px;
  font-size: 18px;
  box-sizing: border-box;
}

<div id="section">
  <h2>Trying to align buttons and label</h2>
  <div id="home_automation_tab">
    <p></p>
    <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly>
    <button class="button">Off</button>
    <button class="button">30%</button>
    <button class="button">50%</button>
    <button class="button">80%</button>
    <button class="button">On</button>
  </div>
</div>

Answer 2

有多种方法可以解决这个问题。 Bhuwan上面的弹性回答可能是最好的方法。

如果您坚持使用HTML结构并且只想要一个css解决方案，请执行以下操作：

请务必将vertical-align:text-top复制到两个css类
将box-sizing: border-box添加到每个（我使用下面的通配符选择器，但你可以把它添加到每个）。
并准确设定高度。您以前依靠边框，加上填充，加上font-size等来设置每个元素的高度。
您可能还需要重新审视标签的宽度，但此处您可以完全控制每个元素的高度和宽度。

* {
  box-sizing: border-box;
}

.resizedTextbox {
  width: 40px; 
  height: 40px;
  padding: 5px;
  border-color:#3e12cc;
  text-shadow:0px 1px 1px #154682;
  background-color:#f5effb;
  vertical-align:text-top;
  text-align:center;
  font-size:18px;
}

.button {
  border-radius:3px;
  background-color: blue;
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 80px;
  height: 40px;
  letter-spacing: 2px;
  font-size:18px;
  vertical-align:text-top;
}

 <div id="section">
  <h2>Trying to align buttons and label</h2>
  <div id="home_automation_tab">
    <p></p>
    <td class="tablerows">
      <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly>
      <button class="button">Off</button>
      <button class="button">30%</button>
      <button class="button">50%</button>
      <button class="button">80%</button>
      <button class="button">On</button>
     </td>
  </div>
 </div>

无法垂直对齐标签和按钮

2 个答案: