¿Cómo puedo alinear una radiobuttonlist horizontalmente? Este es para capturar un valor de género, hombre / mujer. Quiero mantener el nombre de entrada css igual. Este es el html:

<label for="temp">Gender</label>

<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />

<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />

El css:

.grid-container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: auto auto;
    background-color: #2196f3;
    padding: 10px;
}

.left-griditem {
}

input,
label {
    display: block;
}

Aquí hay un codepen. Actualmente los botones están en posición vertical.

1
bier hier 9 sep. 2018 a las 10:27

4 respuestas

La mejor respuesta

Si solo desea los botones de opción, agregue este estilo:

#genderArea input, #genderArea label{
    display: inline;
}

Y usa este HTML:

<div class="grid-container">
    <div class="left-griditem">
        <label for="name">Name</label>
        <input id="name" type="text" name="name">

        <label for="temp">Gender</label>

        <span id="genderArea">
        <label for="one">Male</label>
        <input type="radio" id="one" name="first_item" value="1" />
            <br>
        <label for="two">Female</label>
        <input type="radio" id="one" name="first_item" value="2" />
        </span>

    </div>
    <div class="right-griditem">2</div>
</div>
1
Saif Taher 9 sep. 2018 a las 07:48

Tiene que ajustar una fila particular que desea hacer debajo de una etiqueta div / a.

.grid-container {
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: auto auto;
  background-color: #2196f3;
  padding: 10px;
}

.left-griditem {}

input,
label {
  display: inline-block;
}

div.item>label:first-child {
  width: 70px;
  font-weight: bold;
}

div.item:first-child>input,
div.item:first-child>label {
  display: block
}

body {
  background: hsl(221, 64%, 24%);
  color: hsl(235, 9%, 39%);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 2rem 1rem 1rem 1rem;
}

div {
  background: #fff;
  padding: 1vw 2vw;
}
<div class="grid-container">
  <div class="left-griditem">
    <div class="item">
      <label for="name">Name</label>
      <input id="name" type="text" name="name">
    </div>
    <div class="item">
      <label for="temp">Gender</label>
      <label for="one">Male</label>
      <input type="radio" id="one" name="first_item" value="1" />
      <label for="two">Female</label>
      <input type="radio" id="two" name="first_item" value="2" />
    </div>

  </div>
  <div class="right-griditem">2</div>
</div>
0
Priya 9 sep. 2018 a las 07:59

Pruebe este código simple usando las tablas, tr y td

<table>
  <tr>
    <td>
      <label for="one">Male</label>
    </td>
    <td>
      <input type="radio" id="one" name="first_item" value="1" />
    </td>
    <td style="widht:20px;"></td>
    <td>
      <label for="two">Female</label>
    </td>
    <td>
      <input type="radio" id="one" name="first_item" value="2" />
    </td>
  </tr>
</table>

Este enfoque le brinda la flexibilidad de poner controles, de la manera que desee

0
Priya 9 sep. 2018 a las 10:49

Cambie esto:

input,
label {
    display: block;
}

A esto:

input,
label {
    display: inline;
}
-1
Saif Taher 9 sep. 2018 a las 07:29