html - ML - CSS 如何正确对齐 la 表单标签前的 'required' 星号与标签文本？

Question

我在 Bootstrap 表单标签之前添加了一个“必需”星号，如下所示

生成的 html bootstrap_form 如下

    <div class="form-group-default input-group input-group-attached col-sm-12">
          <div class="form-group">
        <label class="required control-label" for="user_email">Adresse courriel</label>
        <input class="form-control form-control" type="email" value="" name="user[email]" id="user_email">
          </div>
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Réinitialiser" class="btn btn-success btn-cons bold all-caps">
          </span>
    </div>

我的 CSS 条目是:

    label.control-label.required:before {
      color: red;
      content: "*";
      padding-top: 10px;
      font-size: 20px;
      font-family: arial;
    }

我尝试使用 padding-top 降低标签文本 le 级别的星号，现在有点......我怎样才能更好地对齐它？

谢谢你的建议

Answer 1

您应该能够使用 position:relative 和 top:...px 控制星号的位置。

类似的东西:

label.control-label.required:before {
  color: red;
  content: "*";
  font-size: 20px;
  position:relative;
  top:6px;
  font-family: arial;
}

看看 Fiddle .