1

llevo buscando como hacer esta forma y siento que mis esfuerzos son inutiles, llevo ya mucho tiempo intentando hacer el formato pero no me sale bajo ningun medio, quisiera saber que debo de sobreescribir en mi codigo para replicar lo resaltado en la siguiente imagen:
doble entrada
Esto es lo que tengo hasta ahora...
index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Transaction - Search</title>
</head>
<body>
    <main>
        <form id="search" action="action.php" method="post">
            <fieldset class="align">
                <legend>Busqueda de Comprobantes</legend>
                <div class="item">
                    <label for="ruc">R.U.C</label>
                    <input type="text" id="ruc" name="ruc" maxlength="11" title="El RUC lo forman 11 digitos." pattern="[0-9]{11}" required>
                </div>
                <div class="item">
                    <div class="left">
                        <label for="captcha">Verificacion</label>
                        <input type="text" id="captcha" name="captcha" maxlength="5" required>
                    </div>
                    <div class="right">
                        <!-- captcha img 200x50px -->
                    </div>
                </div>
                <div class="item">
                    <input type="submit" form="search" name="button" value="Buscar">
                </div>
            </fieldset>
        </form>
    </main>
</body>
</html>

styles.css

fieldset {
    position: relative;
    border-color: black;
    border-style: solid;
    border-width: 1pt;
    padding: 0.5rem;
    width: 20rem;
    height: auto;
    margin: 0 auto;
}

label {
    font-size: small;
}

select {
    padding: 0.25rem;
    font-family: 'Space Mono', monospace;
    border-color: black;
    border-style: solid;
    border-width: thin;
    text-align: center;
}

input[type="text"] {
    padding: 0.25rem;
    font-family: 'Space Mono', monospace;
    border-color: black;
    border-style: solid;
    border-width: thin;
    text-align: center;
}

input[type="submit"] {
    padding: 0.5rem;
    font: inherit;
    border-color: black;
    border-radius: 2pt;
    border-style: solid;
    border-width: thin;
    width: 100%;
}
.align {
    display: table;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    margin: 0 auto;
}

.item {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    border: 1pt solid black;
}

.left {
    float: left;
    margin: 0 auto;
    border: 1pt solid black;
}

.right {
    float: right;
    margin: 0 auto;
    border: 1pt solid black;
}

Es nesesario para mi hacerlo en puro CSS3, alguien que sepa de front-end porfavor ayudeme.

3
  • ps. uso los bordes para poder visualizar los <div> Commented el 20 sept. 2020 a las 1:22
  • asumo que el formulario tiene un ancho definido?
    – user128299
    Commented el 20 sept. 2020 a las 1:57
  • @BetaM la verdad lo unico que busco es un rectangulo centrado en la pagina, que contenga los items apilados. busco que tambien encaje en la mayoria de celulares pero eso ya es otro problema que resolvere luego... Commented el 20 sept. 2020 a las 2:01

1 respuesta 1

1

Puedes proceder de esta forma:

  • Envolver dentro de un contenedor general a los dos div que tendrán por dentro:
    • La etiqueta label para el texto que acompaña al input
    • La etiqueta input
  • Trata en la medida de lo posible de asignar id o class a tus etiquetas según corresponda, eso hará mas fácil construir el selector y por ende la regla CSS a aplicar
  • Una vez hecho eso, al contenedor general le damos un disposición flex para volver a sus 2 div internos cajas flexibles
  • Sobre el eje horizontal damos una separación entre los dos div contenedores del tipo space-between

Código:

    <style>
      :root {
        --ancho-definido: 100%;
      }
      form {
        margin: 0 auto;
        width: 500px;
      }
      .contenedor{
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
      }
      .contenedor-uno__texto {
        width: var(--ancho-definido);
      }
      .externo {
        width: var(--ancho-definido);
      }
    </style>
    <form action="#" method="POST">
     <fieldset>
     <legend>Busqueda de Comprobantes</legend>
     <label for="">Clave</label>
     <input class="externo" type="text">
      <div class="contenedor">
        <div class="contenedor-uno">
          <label class="contenedor-uno__etiqueta">
            Usuario
          </label>
          <input class="contenedor-uno__texto" type="text">
        </div>
      <div class="contenedor-uno">
          <label class="contenedor-uno__etiqueta">
            Usuario
          </label>
          <input class="contenedor-uno__texto" type="text">
        </div>
      </div>
     </fieldset>
    </form>

1
  • 1
    la verdad es que me ayudaste mucho con saber la existencia de space-between, ya pude resolverlo. Commented el 20 sept. 2020 a las 22:47

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.