無法垂直對齊標簽和按鈕

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>