ML - CSS如何正确对齐＆＃39; required＆＃39;带有标签文字的la form label之前的星号？

Question

我正在添加一个＆＃39; required＆＃39;在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。

Answer 2

尝试删除填充并添加float：

<style>
   label.control-label.required:before {
      color: red;
      content: "*";
      float:left;
      position:relative;
      font-size: 20px;
      font-family: arial;
    }
</style>