1

estoy intentando que el texto y el input de varios label se queden en la misma linea, y alineandolos a la derecha. Soy nuevo en CSS y no lo consigo.

La idea es hacer algo así: introducir la descripción de la imagen aquí

<div><label><span class="required">nif: </span></label>
<input type="text" name="nif" value=""  maxlength="9" required /></div>

gracias

2 respuestas 2

3

Para realizar este proceso es bastante sencillo con Flexbox, que también te invito a que investigues un poco más sobre las cajas flexibles te dejo un ejemplo de cómo puede ser un formulario estilo como la foto que mandaste.

espero sea de utilidad y responda tu pregunta.

<!DOCTYPE html>
<html lang="es">

<head>
    <title>Inicio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="Img/Favicon.png" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <style>
        * {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.formulario {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 350px;
  padding: 30px;
  border: 1px solid #000;
}

.formulario .input-info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
}

.formulario input {
  border: 1px solid #CCC;
  padding: 5px;
}
        </style>
    <form action="#" class="formulario" autocomplete="off">
        <div class="input-info">
            <label class="info-label">Nombre:</label>
            <input type="text">
        </div>

        <div class="input-info">
            <label class="info-label">Apellido:</label>
            <input type="text">
        </div>

        <div class="input-info">
            <label class="info-label">Telefono:</label>
            <input type="text">
        </div>

        <div class="input-info">
            <label class="info-label">Correo:</label>
            <input type="text">
        </div>

    </form>

</body>

</html>

1
  • 1
    El texto de los label deberían estar alineados hacia la derecha, según la imagen del OP el 4 feb. 2019 a las 14:00
1

Un modo sencillo es alinear a la derecha los divs que contienen la etiqueta y el campo y darle un tamaño a los inputs para que sean iguales.

Puedes verlo aquí.

<div clase="item">
<span>nombre:</span>
<input type="text" name="nombre" class="finp">
</div>

//CSS
.item { text-align: right; }
.finp { width: 60%; }

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.