将 Bootstrap 单选按钮与文本对齐

Question

我正在尝试让我的单选按钮对齐，但我很难做到这一点。我要做的是让按钮与缩进对齐，因为如果选择了该选项，我将显示一个插入符号。我还希望文本稍微出现，因为它与实际的单选按钮不内联。

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

这是它现在的样子。

Answer 1

所以我对你的代码做了一些事情：

1. 使用inline-blocks 对齐label 内的项目：

   .radio label > span {
       display: inline-block;
       vertical-align: middle;
   }
   

   这比使用px 定位要好。

2. 现在将插入符号图标添加到radio，以便自动完成水平对齐（并且您可以根据上下文显示绿色插入符号）。为了使这项工作应用这些：

   .correct-answer {
     color: green;
   }
   .wrong-answer {
     opacity: 0;
   }
   

让我知道您的反馈。谢谢！

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio label > span {
  display: inline-block;
  vertical-align: middle;
}
.correct-answer {
  color: green;
}
.wrong-answer {
  opacity: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x wrong-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

Answer 2

我在您的 dom 中做了一些更改，因为您希望在单选按钮之前插入插入符号。当您不希望插入符号可见时，您可以设置这些插入符号的可见性，因为与 display:none 相比，更改可见性仍会占用屏幕空间影响收音机的缩进

<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">True</span>
   </label>
</div>
<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">False</span>
   </label>
</div>

fiddle

Answer 3

尝试添加.radio span.button{ position:relative; top: 4px;} 和 input[type=radio] {margin:0;} 到你的 CSS

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  margin:0;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio span.button{ position:relative; top: 4px;}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

Answer 4

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 5px;
  position:absolute;
  margin-top:3px;
}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>