CSS problem alignment of label inputs - HTML

Question

CSS problem alignment of label inputs - HTML

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm making a registration form, typical of web pages, but I have a problem with the layout of the elements. My form must contain the following fields, which are shown in the image, but must be in the following distribution:

Nombre - Apellidos (deben ocupar la mitad y mitad)
Email (debe ocupar todo el ancho)
DNI Teléfono (deben ocupar la mitad y mitad)
Contraseña1 Contraseña2 (deben ocupar la mitad y mitad)
Registrar (centrado)
¿Ya tienes una cuenta? Ingresa aquí. (centrado)

I leave you the that I generated: (I am subject to modifications as long as it is to improve and learn).

*{
    	box-sizing: border-box;
    }
    
    body{
    	margin: 0;
    	font-family: sans-serif;
    	background: #204862;
    }
    
    h1{
    	color: #fff;
    	text-align: center;
    }
    
    .form-register{
    	width: 85%;
    	max-width: 600px;
    	margin: auto;
    	background: white;
    	border-radius: 4px;
    }
    
    .form-titulo{
    	background: deepskyblue;
    	color: #fff;
    	padding: 20px;
    	text-align: center;
    	font-weight: 100;
    	font-size: 30px;
    	border-top-left-radius: 7px;
    	border-top-right-radius: 7px;
    	border-bottom: 5px solid red;
    }
    
    .contenedor-inputs{
    	padding: 2px 20px;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    }
    
    .input{
    	margin-bottom: 8px;
    	padding: 8px;
    	font-size: 16px;
    	border-radius: 3px;
    	border: 1px solid darkgray;
    }
    
    .input-2{
    	width: 40%;
    }
    
    .input-1{
    	width: 100%;
    }
    
    .enviar{
    	background: crimson;
    	color: #fff;
    	margin: auto;
    	padding: 10px 40px;
    	cursor: pointer;
    	font-size: 12px;
    }
    
    .enviar:active{
    	transform: scale(1.05);
    }
    
    .form-link{
    	width: 100%;
    	margin: 'px;
    	text-align: center;
    	font-size: 14px;
    }

<!DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta charset="UTF-8">
    		<title>Formulario de registro</title>
    		<link rel="stylesheet" href="estilos.css">
    	</head>
    	<body>
    		<h1>Formulario de registro</h1>
    		<form action="registrar.php" method="POST" class="form-register">
    			<h2 class="form-titulo">CREA UNA CUENTA</h2>
    			<div class="contenedor-inputs">
    				<label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" required>
    				<label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2" required>
    				<br/>
    				<label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1" required>
    				<br/>
    				<label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2" required>
    				<label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2" required>
    				<br/>
    				<label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input-2" required>
    				<label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2" required>
    				<br/>
    				<input type="submit" value="Registrar" class="enviar" tabindex="8"/>
    				<p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
    			</div>
    		</form>
    	</body>
    </html>

html css

asked by omaza1990 07.11.2017 в 14:37

source

2 answers

1

Enter each label-input pair into a div so that in each row there is only one pair of elements:

<div class="contenedor-inputs">
    <div>
        <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" required>
    </div>
    <div>
        <label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2" required>
    </div>
    <div>
        <label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1" required>
    </div>
    <div>
        <label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2" required>
    </div>
    <div>
        <label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2" required>
    </div>
    <div>
        <label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input-2" required>
    </div>
    <div>
        <label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2" required>
    </div>
    <div>
        <input type="submit" value="Registrar" class="enviar" tabindex="8"/>
        <p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
    </div>  
</div>

This way you only have to focus the content of these divs using a class with the necessary styles.

answered by 07.11.2017 в 14:58

Cursor Android Studio Get data hide and show button if the type="file" is empty or not

score 1 · Accepted Answer

Here is an example of how it could be based on your code

CSS:

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: sans-serif;
    background: #204862;
}

h1{
    color: #fff;
    text-align: center;
}

.form-register{
    width: 85%;
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 4px;
}

.form-titulo{
    background: deepskyblue;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 5px solid red;
}

.contenedor-inputs{
    padding: 2px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.input{
  min-height: 25px;
    border-radius: 3px;
    border: 1px solid darkgray;
  padding-left:5px;
}

.input-2{
    width:35%;
  max-width:150px;
}

.input-1{
    width: 80%;
  max-width: 450px;
}

.enviar{
    background: crimson;
    color: #fff;
    margin: auto;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 12px;
  border-radius: 5px;
}

.enviar:active{
    transform: scale(1.05);
}

.form-link{
    width: 100%;
    margin: 'px;
    text-align: center;
    font-size: 14px;
}

/* Contianers */
.container{
  width: 100%;
  margin-bottom: 10px;
}

HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario de registro</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <h1>Formulario de registro</h1>
        <form action="registrar.php" method="POST" class="form-register">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
        <div class="container">
                  <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input input-2" required>
          <label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input input-2" required>
        </div>
        <div class="container">
                  <label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input input-1" required>
                </div>
        <div class="container">
                <label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input input-2" required>
                <label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input input-2" required>
                </div>
        <div class="container">
                <label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input input-2" required>
                <label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input input-2" required>
                </div>
                <input type="submit" value="Registrar" class="enviar" tabindex="8"/>
                <p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
            </div>
        </form>
    </body>
</html>

I suggest you learn how to use Frameworks as Bootstrap since they help a lot to make work faster