将Bootstrap单选按钮与文本对齐

Question

I am trying to get my radio buttons to align but I am having difficulty doing this. What I am trying to do is have the buttons align with an indentation because I am going to display a caret if the option has been selected. I also want the text to come up just a bit because it's not inline with the actual radio button.

 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> 

Here is what it looks like right now.

Answer 1

Try adding .radio span.button{ position:relative; top: 4px;} .radio span.button{ position:relative; top: 4px;} and input[type=radio] {margin:0;} to your 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 2

So I did a few things to your code:

1. Align the items inside the label using inline-block s:

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

   This is better than positioning using px .

2. Now add the caret icon to both radio so that the horizontal alignment will be automatically done (and you can contextually show the green caret). To make that work apply these:

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

Let me know your feedback. Thanks!

 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

 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> 

Answer 4

i did some changes in your dom as you want caret before radio button.you can set visibility of those caret when you dont want it to be visible as changing visibility will still occupy space on screen as compare to display:none which will affect indentation of radio

<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