1

Mi consulta es como logro que quede bien alineado el input type radio, porque queda desfasado.

body {
background-image: url(img/darkblue.jpg);
background-size: 100vw 100vh;
font-family: arial;
color: #fff;
background-attachment: fixed;
margin:0;}

form {
width: 400px;
margin:auto;
padding: 10px 20px;
background: rgba(0,0,0,0.4);
box-sizing: border-box;
border-radius: 7px;
}
h1{
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
input, textarea{
width: 100%;
margin-bottom: 12px;
}
 <fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="yes" value="yes"> Yes
    </label>
    <label>
        <input type="radio" name="no" value="no"> No
    </label>
    <label>
        <input type="radio" name="sometimes" value="sometimes"> Sometimes
    </label>
</fieldset>

1
  • 4
    Aliniado hacia que direccion? Los veo excelentemente bien aliniados en el centro.
    – Einer
    Commented el 5 sept. 2018 a las 14:55

3 respuestas 3

2

El problema es que estableces el width de 100% a todos los input incluido los radio (estos también son input). Lo unico que tienes que hacer es aplicar el selector :not para omitir que estas reglas se apliquen a los radio. A continuación te dejo un ejemplo:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  /*color: #fff;*/
  background-attachment: fixed;
  margin:0;
}

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
}

h1{
  /*color: #fff;*/
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

input:not([type="radio"]), textarea{
  width: 100%; /* Esto hace que el radio tenga el 100% de ancho */
  margin-bottom: 12px; /* Y esto que exista en margen inferior */
}

label {
  display: block; /* Poner cada label uno debajo de otro */
  margin-bottom: 12px; /* Agregamos un margin inferior (como el que le pones a los demas input) */
}

label:last-child {
  margin-bottom: 0; /* Quitamos el margen inferior al último label. */
}
<fieldset>
  <legend>Sports practice?</legend>
  <label>
    <input name="sport-practice" type="radio" name="yes" value="yes"> Yes
  </label>
  <label>
    <input name="sport-practice" type="radio" name="no" value="no"> No
  </label>
  <label>
    <input name="sport-practice" type="radio" name="sometimes" value="sometimes"> Sometimes
  </label>
</fieldset>

Otra cosa, noté que no especificaste un name para los radio. Esto va a provocar que se puedan seleccionar todas las opciones. El codigo de arriba esta corregido para que únicamente deje seleccionar una opción. Solo tienes que agregarle el atributo name con exactamente el mismo valor en todos los input tipo radio.

Saludos!

0

Bueno a veces tienes que jugar con el margen de los elementos porque muchas veces puede dar problemas el line-height y puede darte ese efecto que no están alineados, ve probando colocando el margin-top con valores negativos para subirlo o con valores positivos para bajarlo. El margin-top va aplicado directamente al input tipo radio.

0

Si entiendo bien, tu problema es porque a todos los inputs sin discriminar cuales son radio o checkbox le das un ancho al 100% del contenedor, por lo que no quedan alineados al texto.

Prueba el siguiente código:

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}

Esto setea por defecto el ancho inicial del input.

Un ejemplo acorde a tu proyecto sería:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  color: #fff;
  background-attachment: fixed;
  margin:0;
  }

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
}

h1{
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

label{
  color: black;
}

input, textarea{
  width: 100%;
  margin-bottom: 12px;
}

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}
<fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="yes" value="yes">
        Yes
    </label>
    <label>
        <input type="radio" name="no" value="no"> 
        No
    </label>
    <label>
        <input type="radio" name="sometimes" value="sometimes"> 
        Sometimes
    </label>
</fieldset>

Entre otras cosas, el atributo name debería ser el mismo en todos los radio buttons, para que puedan funcionar correctamente, he aquí el mismo demo con esto corregido:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  color: #fff;
  background-attachment: fixed;
  margin:0;
  }

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
  color: black;
}

h1{
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

legend{
  color: black;
}

label{
  color: black;
  display: block; /*Obliga a cada opción a ocupar una linea al 100% estando uno sobre otro*/
}

input, textarea{
  width: 100%;
  margin-bottom: 12px;
}

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}
<fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="option" value="yes">
        Yes
    </label>
    <label>
        <input type="radio" name="option" value="no"> 
        No
    </label>
    <label>
        <input type="radio" name="option" value="sometimes"> 
        Sometimes
    </label>
</fieldset>

1
  • Muchas gracias!!! Funciona bien!
    – Paola
    Commented el 5 sept. 2018 a las 15:07

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.