1

Tengo 3 radios, cada uno dentro de un label en el que escribo un nombre, para que al hacer click sobre este también se haga click en el radio. El problema es que no logro colocarlos a todos de forma horizontal en la misma linea, les dejo el código html y una imágen de cómo deberían quedar:

label {
  float: left;
  cursor: pointer;
  display: inline-block;
  width: 20%;
}
<label><input type="radio" name="radio" />Primero</label>
<label><input type="radio" name="radio" />Segundo</label>
<label><input type="radio" name="radio" />Tercero</label>

introducir la descripción de la imagen aquí

3
  • Comparte tu codigo CSS, el codigo que estas mostrando ordenaria los elementos uno tras otro como la primera imagen
    – IvanS95
    Commented el 9 abr. 2019 a las 21:52
  • He ingresado el css que tenian los label
    – Xefiron
    Commented el 9 abr. 2019 a las 21:59
  • Aun con ese codigo los input se muestran lado al lado como se supone que esperas, debes proveer un ejemplo de tu problema para que podamos ayudarte; crea un fragmento de codigo donde se replique el problema que tienes
    – IvanS95
    Commented el 9 abr. 2019 a las 22:05

3 respuestas 3

2

puedes agregarle float:left en el estilo de la etiqueta label

ejemplo:

<label style="float:left"><input checked  type="radio"value="1">Primero</label>
<label style="float:left"><input  type="radio"value="2">Segundo</label>
<label style="float:left"><input  type="radio"value="3">Tercero</label>
3
  • Lo aplique pero siguen estando en vertical
    – Xefiron
    Commented el 9 abr. 2019 a las 22:02
  • puede que tenga que ver con width: 20%; con respecto al contenedor de los labels Commented el 9 abr. 2019 a las 22:09
  • Eso me soluciono el problema, te lo agradezco un montón.
    – Xefiron
    Commented el 9 abr. 2019 a las 22:10
1

Saca los labels de los inputs y tendras el resultado que deseas.

 <input type="radio" value="value1" name="group1">Grupo 1
 <input type="radio" value="value2" name="group2">Grupo 2

1
  • El problema es que pierden la capacidad de checkearse si haces click en el texto.
    – Xefiron
    Commented el 9 abr. 2019 a las 21:59
0

Cambie el div ke los contenia por una tabla....y align center y justify content. ..y kitale el display flex...los hace perder cualidades....espero te ayude

1
  • ¿A qué te referís con "los hace perder cualidades"? Por cierto, leé Cómo responder.
    – padaleiana
    Commented el 29 jun. 2022 a las 11:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.