0

Ante todo gracias por entrar en la pregunta, el caso es que quiero alinear varios inputs en HTML5 con el objetivo de que todos queden alineados, es decir, uno debajo de otro de forma simétrica. Mi código actualmente está así:

(Sé que debería utilizar la etiqueta label para escribir al lado de los inputs y demás, pero en clase nos obligan a hacerlo así, saludos.)

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 11</title>
    <style>
        p{
            display: inline;
        }
        .primero{
            margin-left: 30px;
            margin-top: 5px;
            width: 10%;
        }
    </style>
</head>
<body>
    <form action="#" target="#" method="POST">
        <p>Nombre</p>
        <input class="primero" type="text" name="nombre" id=""><br>
        <p>Primer Apellido</p>
        <input class="primero" type="text" name="apellido" id="">
        <p>Segundo Apellido</p>
        <input class="segundo" type="text" name="segundoapellido" id=""><br>
        <p>Dirección</p>
        <input class="primero" type="text" name="direccion" id=""><br>
        <p>Provincia</p>
        <input class="primero" type="text" name="provincia" id="">
        <p>Código Postal</p>
        <input class="segundo" type="number" name="" id=""><br>
        <p>Teléfono fijo</p>
        <input class="primero" type="tel" name="telefonofijo" id="">
        <p>Teléfono móvil</p>
        <input class="segundo" type="tel" name="telefonomovil" id=""><br>
        <p>Edad</p>
        <input class="primerp" type="range" name="edad" id="" min="1" max="100" value="50"><br>
        <p>Correo electrónico</p>
        <input class="primero" type="email" name="email" id=""><br>
        <p>WEB</p>
        <input class="primero" type="text" name="web" id="">
    </form>
</body>
</html>

2 respuestas 2

0

Lo que ocurre es que debes pasar los elementos de en línea a en bloque para que en lugar de que aparezcan uno a lado del otro, aparezcan uno abajo del otro.

Entonces alcanza con declarar lo siguiente en tu CSS

.primero {
     display: block;
}
0

En este caso tienes varias opciones, aunque las más sencillas y efectivas serían:

  • Crear tablas, separando el texto del Input, así quedando todas alineadas
  • Utilizar CSS, concretamente la función flex, que se ocupará de ordenartelo.

Aquí te dejo las instrucciones para que sepas cómo se utiliza:

https://codepen.io/enxaneta/pen/adLPwv

Espero que te sirva, un saludo.

Por cierto, aquí aplicado:

HTML

    <html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 11</title>
    <style>
        p{
            display: inline;
        }
        .primero{
            margin-left: 30px;
            margin-top: 5px;
            width: 10%;
        }
    </style>
</head>
<body>
    <form action="#" target="#" method="POST">
    
    <table>
<tbody>
<tr>
<td><p>Nombre</p></td>
<td><input class="primero" type="text" name="nombre" id=""></td>
</tr>
<tr>
<td><p>Primer Apellido</p></td>
<td><input class="primero" type="text" name="apellido" id=""></td>
</tr>
<tr>
<td><p>Segundo Apellido</p></td>
<td><input class="segundo" type="text" name="segundoapellido" id=""></td>
</tr>
<tr>
<td><p>Dirección</p></td>
<td><input class="primero" type="text" name="direccion" id=""></td>
</tr>
<tr>
<td><p>Provincia</p></td>
<td><input class="primero" type="text" name="provincia" id=""></td>
</tr>
<tr>
<td><p>Código Postal</p></td>
<td><input class="segundo" type="number" name="" id=""></td>
</tr>
<tr>
<td><p>Teléfono fijo</p></td>
<td><input class="primero" type="tel" name="telefonofijo" id=""></td>
</tr>
</tbody>
</table>
    </form>
</body>
</html>

CSS

.primero, .segundo {
    margin-left: 15px;
    margin-top: 0px;
    width: 96%;
}

Resultado:

introducir la descripción de la imagen aquí

4
  • Creo que sería bueno indicarle el como, ya que el enlace que compartes tiene demasiada información
    – user128299
    Commented el 27 ene. 2021 a las 15:19
  • Cierto, aunque con el siguiente CSS es suficiente: .primero, .segundo { margin-left: 15px; margin-top: 0px; width: 96%; }
    – Over_Code
    Commented el 27 ene. 2021 a las 15:38
  • 1
    De hecho no es que solo con ese css sea suficiente, en todo caso el resultado funcional es por que lo pusiste en tables y con css terminaste de alinear
    – user128299
    Commented el 27 ene. 2021 a las 15:41
  • No pasa nada, arriba he detallado por apartados la solución. Un saludo.
    – Over_Code
    Commented el 27 ene. 2021 a las 15:42

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.