Align radio button

Question

Align radio button

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

<div class="input-group">
  <span class="input-group-addon">Sexo</span>
    <span class="radio">
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Right</span> 
      </label>
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Left</span> 
      </label>
    </span>
</div>

I need to keep the same background color as the span "sex", in input format

Something similar to this but without the input text and with the radio buttons on the same side and all the input of the same silver color, thank you!

html bootstrap

asked by Javier Antonio Aguayo Aguilar 10.03.2017 в 14:32

source

2 answers

Do not finish the main thread until you finish another task launched in the background Problems with "tools: layout_editor_absoluteY / X" Android Studio: This view is not constrained

score 3 · Answer 1

Put sexo in between and edit a bit the style of .input-group to give it a background color, an edge, a rounded on the corners and a padding on the sides. To label sexo that is in the middle, give a margin to the sides to separate it from the radios.

Example

#sexo {
  background-color: #f2f2f2;
  border: 2px solid #ddd;
  border-radius: 3px;
  margin: 20px auto;
  padding: 0 10px;
}
#sexo label {
  display: inline-block;
}
#sexo label:nth-of-type(2) {
  margin: 0 20px;
  padding: 0;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" id="sexo">
    <span class="radio">
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Right</span> 
      </label>
      <label>Sexo</label>
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Left</span> 
      </label>
    </span>
</div>

score 0 · Answer 2

I think this could help you:

<div class="input-group">
  <span class="input-group-addon">
    <div class="radio">
      <label>
        <input type="radio" name="radio"> Right
      </label>
    </div>
  </span>
  <span class="input-group-addon">
    <div class="radio">
      <label>
        <input type="radio" name="radio"> Left
      </label>
    </div>
  </span>
</div>