无法垂直对齐标签和按钮

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 box-sizing: border-box并尝试更改height的值，以使内容可见

 .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的上述flexbox答案可能是最好的方法。

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

• 确保将vertical-align:text-top复制到两个css类
• 为每个box-sizing: border-box添加box-sizing: border-box （我在下面使用了通配符选择器，但是您可以将其添加到每个box-sizing: border-box ）。
• 并精确设置高度。 您以前是依靠边框，填充，字体大小等来设置每个元素的高度的。
• 此时，您可能还需要重新查看标签的宽度，但是在这里，您可以完全控制每个元素的高度和宽度。

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