Tenía entendido que el inline solo ocupaba el espacio segun su contenido y el block ocupa todo el ancho de la linea, porque si ambos están con display block están uno al lado del otro? No debería ser inline-block para esto?
Tenía entendido que el inline solo ocupaba el espacio segun su contenido y el block ocupa todo el ancho de la linea, porque si ambos están con display block están uno al lado del otro? No debería ser inline-block para esto?
Justamente, los inputs vienen con inline por default y lo que hizo fue usar block para que ocupen todo el ancho, sin embargo le asigo una clase a los inputs TEXTO para que no afecten a los RADIO, y luego introdujo los inputs radio dentro de los LABEL para que se invirtieran en cuanto a orden, sin especificarlos en el CSS porque ya van con INLINE. Espero no haberte confundido o quizás yo soy el confundido :D
Saludos!
Hola Emmanuel, entonces entiendo que ya no estaría bloqueado (display: block) para el form input ¿cierto? Y por ello regresaría al default que es in-line. Ahora el bloqueo solo sería para la clase input-padron.
A´si es, de hecho el código quedo así:
HTML
<form><!--Always that we create an input is important add a label to know
we have to do-->
<label for="nombreapellido">Nombre y Apellido</label>
<input type="text" id="nombreapellido" class="input-padron" required>
<label for="correoelectronico">Correo electrónico</label>
<input type="email" id="correoelectronico" class="input-padron" required
placeholder="email@dominio.com">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" class="input-padron" required
placeholder="(XX) XXXX XXXX">
<label for="mensaje">Mensaje</label>
<textarea cols="70" rows="10" id="mensaje" class="input-padron" required></textarea>
<fieldset><!--We can use FIELDSET for a form with the same type of fields.-->
<legend>¿Cómo le gustaría que lo contactemos?</legend><!--At the same time
we can use LEGEND tag no P-->
<label for="radio-email"><input type="radio" name="contacto"
value="email" id="radio-email">Email</label>
<label for="radio-telefono"><input type="radio" name="contacto"
value="telefono" id="radio-telefono">Teléfono</label>
<label for="radio-whatsapp"><input type="radio" name="contacto"
value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>
</fieldset>
SE ESE ESE TRES
No sé si ya llegaste hasta modificar el botón de ENVIAR, pero de todas formas te adjunto el código, fijate que cuando le haces HOVEr al botón se sale a la izquierda, te garego cómo arreglé eso.
form{
margin: 40px 0;
}
form label,
form legend{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.input-padron{
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox{
margin: 20px 0;
}
.enviar{
width: 40%;
padding: 15px;
font-size: 18px;
font-weight: bold;
color: white;
background: orange;
border:none;
border-radius: 5px;
transition: 1s all;
cursor: pointer;
}
.enviar:hover{
background: darkorange;
transform-origin: 0% 10%;
transform: scale(1.2);
}