将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

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

＆＃13;

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

1. 使用label s：

   对齐inline-block内的项目

   .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 3

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我在您的dom中进行了一些更改，因为您需要在单选按钮之前使用插入符号。当您不希望它显示时，您可以设置这些插入符的可见性，因为与显示相比，更改可见性仍将占用屏幕上的空间：none将会影响电台缩进

npm install --save-dev github:gulpjs/gulp#4.0 

fiddle