对齐多个标签

Question

我希望像下面的示例一样，在页面的左侧对齐几个HTML标签。

以下是实现我的想法的代码。参见下面的代码：

    .form_padding, label{
      font-family: 'Pridi', serif;
      font-size: 16px;
      font-weight: bold;
      color: #595959;
      padding-top: 20px;
      padding-left: 90px;
      
    }
    
    .form_group{
      height: 28px;
      width: 272px;
      border-width:1px 1px 2px 1px;
      border-style:solid;
      border-color: #ccc #ccc #C22312 #ccc; 
      border-radius:1px;
    }

    <div class="form_padding">
         <label>Your Username:</label>
        <input type="text" name="username" class="form_group">
     </div>
    
     <div class="form_padding">
          <label>Your Email Adress:</label>
          <input type="email" name="email_adress" class="form_group">
     </div>
    
     <div class="form_padding">
          <label>Confirm Your E-mail:</label>
          <input type="email" name="email_adress_confirm" class="form_group">
     </div>  

Answer 1

嗨，我在下面所做的是将form_padding和标签CSS分开。

然后在我添加的标签上显示：行内块，text-align：right，添加右边距并指定宽度。

在此处指定宽度很重要，因为这样可以使间距均匀。

运行下面的代码。

.form_padding {
  display: block;
  padding-top: 20px;
}

label {
  font-family: 'Pridi', serif;
  font-size: 16px;
  font-weight: bold;
  color: #595959;
  padding-left: 0px;
  width: 180px;
  display: inline-block;
  text-align:right;
  margin-right:20px;
}

.form_group {
  height: 28px;
  width: 150px;
  border-width: 1px 1px 2px 1px;
  border-style: solid;
  border-color: #ccc #ccc #C22312 #ccc;
  border-radius: 1px;
}

<div class="form_padding">
  <label>Your Username:</label>
  <input type="text" name="username" class="form_group">
</div>

<div class="form_padding">
  <label>Your Email Adress:</label>
  <input type="email" name="email_adress" class="form_group">
</div>

<div class="form_padding">
  <label>Confirm Your E-mail:</label>
  <input type="email" name="email_adress_confirm" class="form_group">
</div>