如何垂直對齊表單中的輸入字段？

Question

你好，

如何對齊輸入字段，使它們從同一條垂直線上開始？ 是否有我可以使用的 CSS 方法而不是手動編輯每個輸入字段？

這是html代碼：

 <form id="survey-form"> 
    <div id="form-group"> 
      <label for="name" id="name-label"> Name: </label> 
      <input type="text" id="name" name="name" placeholder="full name" required></input><br> 
    </div> 

    <div id="form-group"> 
      <label for="email" id="email-label"> Email: </label> 
      <input type="email" id="email" name="email" placeholder="validated email" required></input><br> 
    </div>

    <div id="form-group"> 
      <label for="number" id="number-label"> Contact: </label>
      <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"></input><br> 
    </div>
 </form>

對於 CSS，我目前只有：

input {
  margin-bottom: 15px;
  width: 10%;
}

我想知道如何在 CSS 中對其進行編碼以使文本輸入字段對齊？ 例如，如果我使用填充，文本字段仍然不會對齊，因為標簽的長度不同。

Answer 1

首先，您不需要將輸入關閉為</input> 。

此外，在最后一個輸入中，您忘記了<div id="form-group"> 。

現在，使所有輸入對齊的想法只是將所有標簽作為具有特定寬度的內聯塊元素。 這樣，它將推出所有輸入並在寬度結束后對齊它們。

 input { margin-bottom: 15px; width: 10%; } #form-group label { display: inline-block; width: 60px; }

 <form id="survey-form"> <div id="form-group"> <label for="name" id="name-label"> Name: </label> <input type="text" id="name" name="name" placeholder="full name" required><br> </div> <div id="form-group"> <label for="email" id="email-label"> Email: </label> <input type="email" id="email" name="email" placeholder="validated email" required><br> </div> <div id="form-group"> <label for="number" id="number-label"> Contact: </label> <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"> </div> </form>

Answer 2

使用flex 屬性對齊標簽和輸入框

#form-group{
  display:flex;
  align-items:center;
  margin-bottom:20px;
}
#form-group label{
  flex:1;
  flex-basis:20%;
  max-width:20%;
}
#form-group input {
  flex:2;
  flex-basis:20%;
  max-width:20%;
}

工作演示

 #form-group{ display:flex; align-items:center; margin-bottom:20px; } #form-group label{ flex:1; flex-basis:20%; max-width:20%; } #form-group input { flex:2; flex-basis:20%; max-width:20%; }

 <form id="survey-form"> <div id="form-group"> <label for="name" id="name-label"> Name: </label> <input type="text" id="name" name="name" placeholder="full name" required> </div> <div id="form-group"> <label for="email" id="email-label"> Email: </label> <input type="email" id="email" name="email" placeholder="validated email" required> </div> <div id="form-group"> <label for="number" id="number-label"> Contact: </label> <input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"> </div> </form>