2

Estoy en proceso de intentar construir un formulario de registro según nuestra necesidad. Mi problema es que los section que tengo creado visualmente se me ven mal. Agradezco cualquier ayuda o guía que puedan entregarme, básicamente lo que estoy intentando hacer es que no se vean desalineados los section del formulario.

introducir la descripción de la imagen aquí

Adjunto mi código:

/* Estilos generales */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F8F8F8;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333333;
}

h2 {
  margin-top: 50px;
  color: #333333;
}

section {
  display: inline-block;
  width: 40%;
}



form {
  width: 50%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #F0F0F0;
  color: #333333;
}

input[type="submit"] {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 20px auto;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #333333;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #111111;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  section {
    display: block;
    width: 100%;
    padding: 0;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>New Vendors</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
  </head>
  <body>
    <h1>Creation New Vendors</h1>

    <section>
      <form>
        <h2> Request General Information</h2>
        <label for="person">Requestor:</label>
        <input type="text" id="person" name="person" required><br><br>

        <label for="date">Date of request:</label>
        <input type="date" id="date" name="date" required><br><br>

        <label for="company">Choose Company:</label>
        <select id="company" name="company">
          <option value="eduLLC">Austral Edu LLC</option>
          <option value="servicesLLC">Austral Services LLC</option>
          <option value="australCL">Austral Turismo Brasil Ltda</option>
          <option value="australBR">Servicios Austral Chile Spa</option>
          <option value="australBR">Servicios Austral Peru SRL</option>
        </select>

        <label for="vendor">Supplier's Name:</label>
        <input type="text" id="vendor" name="vendor" required><br><br>

        <label for="currency">Choose currency:</label>
        <select id="currency" name="currency" required>
          <option value="BRL">Brazilian Real (BRL)</option>
          <option value="CAD">Dólar canadiense (CAD)</option>
          <option value="CLP">Chilean Peso (CLP)</option>
          <option value="COP">Colombian Peso (COP)</option>
          <option value="CRC">Costa Rica Colon (CRC)</option>
          <option value="CZK">Czech Koruna (CZK)</option>
          <option value="DKK">Danish Krone (DKK)</option>
          <option value="EUR">Euro (EUR)</option>
          <option value="GBP">Libra esterlina (GBP)</option>
          <option value="USD">Dólar estadounidense (USD)</option>
          <option value="MXN">Mexican Peso (MXN)</option>
          <option value="PEN">Peruvian Peso (PEN)</option>
        </select>   
      </form>
    </section>  

    <section>
      <form>
        <h2> Vendor General Information</h2>
        <label for="vendorLegalName">Vendor Legal Name:</label>
        <input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>

        <label for="vendorAddress">Vendor Address:</label>
        <input type="text" id="vendorAddress" name="vendorAddress"><br><br>

        <label for="vendorPhoneNumber">Vendor Phone:</label>
        <input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>

        <label for="vendorEmail">Vendor Email:</label>
        <input type="text" id="vendorEmail" name="vendorEmail" required><br><br>

        <label for="vendorServices">Vendor Email:</label>
        <input type="text" id="vendorServices" name="vendorServices" ><br><br>

      </form>
    </section>

    <input type="submit" value="Enviar">


  </body>
</html>

6
  • Buen día, bienvenido a Stackoverflow, podrías adjuntarnos tu código completo? Incluyendo el HTML y CSS, recuerda hacer un ejemplo mínimo, completo y verificable el 11 abr. a las 18:51
  • Lo intenté, pero cada vez que queria enviarlo, me decia que mi pregunta era solo código y no me dejaba mandarlo, me ayudas con eso tambien si no es mucha molestia? el 11 abr. a las 18:56
  • Puedes crear un proyecto en codepen.io y compartirnos el enlace. el 11 abr. a las 18:57
  • Creo que este es el enlace codepen.io/AxeLedesma/pen/poOOaaE el 11 abr. a las 19:00
  • Perfecto, moví el código en tu pregunta, por si el link se cae el 11 abr. a las 19:04

2 respuestas 2

2

Solamente tendrías que usar la propiedad vertical-align: top; para que el section esté alineado arriba del todo:

section {
  display: inline-block;
  vertical-align: top;
  width: 40%;
}

Demo:

/* Estilos generales */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F8F8F8;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333333;
}

h2 {
  margin-top: 50px;
  color: #333333;
}

section {
  display: inline-block;
  vertical-align: top;
  width: 40%;
}



form {
  width: 50%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #F0F0F0;
  color: #333333;
}

input[type="submit"] {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 20px auto;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #333333;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #111111;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  section {
    display: block;
    width: 100%;
    padding: 0;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>New Vendors</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
  </head>
  <body>
    <h1>Creation New Vendors</h1>

    <section>
      <form>
        <h2> Request General Information</h2>
        <label for="person">Requestor:</label>
        <input type="text" id="person" name="person" required><br><br>

        <label for="date">Date of request:</label>
        <input type="date" id="date" name="date" required><br><br>

        <label for="company">Choose Company:</label>
        <select id="company" name="company">
          <option value="eduLLC">Austral Edu LLC</option>
          <option value="servicesLLC">Austral Services LLC</option>
          <option value="australCL">Austral Turismo Brasil Ltda</option>
          <option value="australBR">Servicios Austral Chile Spa</option>
          <option value="australBR">Servicios Austral Peru SRL</option>
        </select>

        <label for="vendor">Supplier's Name:</label>
        <input type="text" id="vendor" name="vendor" required><br><br>

        <label for="currency">Choose currency:</label>
        <select id="currency" name="currency" required>
          <option value="BRL">Brazilian Real (BRL)</option>
          <option value="CAD">Dólar canadiense (CAD)</option>
          <option value="CLP">Chilean Peso (CLP)</option>
          <option value="COP">Colombian Peso (COP)</option>
          <option value="CRC">Costa Rica Colon (CRC)</option>
          <option value="CZK">Czech Koruna (CZK)</option>
          <option value="DKK">Danish Krone (DKK)</option>
          <option value="EUR">Euro (EUR)</option>
          <option value="GBP">Libra esterlina (GBP)</option>
          <option value="USD">Dólar estadounidense (USD)</option>
          <option value="MXN">Mexican Peso (MXN)</option>
          <option value="PEN">Peruvian Peso (PEN)</option>
        </select>   
      </form>
    </section>  

    <section>
      <form>
        <h2> Vendor General Information</h2>
        <label for="vendorLegalName">Vendor Legal Name:</label>
        <input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>

        <label for="vendorAddress">Vendor Address:</label>
        <input type="text" id="vendorAddress" name="vendorAddress"><br><br>

        <label for="vendorPhoneNumber">Vendor Phone:</label>
        <input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>

        <label for="vendorEmail">Vendor Email:</label>
        <input type="text" id="vendorEmail" name="vendorEmail" required><br><br>

        <label for="vendorServices">Vendor Email:</label>
        <input type="text" id="vendorServices" name="vendorServices" ><br><br>

      </form>
    </section>

    <input type="submit" value="Enviar">


  </body>
</html>

Edit:

Para evitar que se desborde los section, la idea sería que los section ocupen todo el alto posible (el 100%). Entonces, primero estructuremos tu HTML. Vamos a crear un div que encierre a estos dos section y a tu input enviar.

<div class="contenido">
  <section>
    <!-- Todo tu section 1 -->
  </section>
  <section>
    <!-- Todo tu section 2 -->
  </section>
  <input type="submit" value="Enviar">
</div>

Y a la clase contenido indiquemos que sea flexible, para que los section junto con tu botón de enviar estén uno al lado del otro:

.contenido {
  display: flex;
}

Y hagamos que los form de los section ocupen toda la altura posible de contenido, ya que cada form está dentro de un section. De esta forma, la altura del form será el mismo que el section, y como section está dentro de contenido, hará que éste ocupe toda la altura posible (y ya no vendría necesario el vertical-align: top del section):

form {
  width: 50%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  height: 100%; /* le añado esto */
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

Ahora, debemos modificar a tu input enviar, ya que, debido a que el input no está encerrado en ningún bloque, la altura del input ocupará todo el máximo de contenido automáticamente (al igual que los sections). Entonces, creemos un div que encierre a este input:

<div class="contenido">
  <section>
    <!-- Todo tu section 1 -->
  </section>
  <section>
    <!-- Todo tu section 2 -->
  </section>
  <div class="myinput">
    <input type="submit" value="Enviar">
  </div>
</div>

Y le damos las siguientes clases, para centrar su contenido (tu input):

.myinput {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Así, el div llamado myinput ocupará todo el alto, pero el input no, solo estará centrado.

Y por último, para que se vea mejor en dispositivos pequeños, hice las siguientes modificaciones en la regla @media:

@media only screen and (max-width: 767px) {
  .contenido, section {
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 20px;
  }

  .myinput {
     width: 100%;
  }
}

Aquí solo indico que la dirección de los elementos que están dentro de contenido y section serán en columnas, tendrán un ancho de 100% y una separación de 20px. También, el div del input ocuará todo el ancho de 100% para que se centre correctamente.


Código final:

/* Estilos generales */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F8F8F8;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333333;
}

h2 {
  margin-top: 50px;
  color: #333333;
}

.contenido {
  display: flex;
}

section {
  display: inline-block;
  width: 40%;
}

.myinput {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  width: 50%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  height: 100%;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #F0F0F0;
  color: #333333;
}

input[type="submit"] {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 20px auto;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #333333;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #111111;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  .contenido, section {
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 20px;
  }

  .myinput {
     width: 100%;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>New Vendors</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
  </head>
  <body>
    <h1>Creation New Vendors</h1>

    <div class="contenido">
      <section>
        <form>
          <h2> Request General Information</h2>
          <label for="person">Requestor:</label>
          <input type="text" id="person" name="person" required><br><br>

          <label for="date">Date of request:</label>
          <input type="date" id="date" name="date" required><br><br>

          <label for="company">Choose Company:</label>
          <select id="company" name="company">
            <option value="eduLLC">Austral Edu LLC</option>
            <option value="servicesLLC">Austral Services LLC</option>
            <option value="australCL">Austral Turismo Brasil Ltda</option>
            <option value="australBR">Servicios Austral Chile Spa</option>
            <option value="australBR">Servicios Austral Peru SRL</option>
          </select>

          <label for="vendor">Supplier's Name:</label>
          <input type="text" id="vendor" name="vendor" required><br><br>

          <label for="currency">Choose currency:</label>
          <select id="currency" name="currency" required>
            <option value="BRL">Brazilian Real (BRL)</option>
            <option value="CAD">Dólar canadiense (CAD)</option>
            <option value="CLP">Chilean Peso (CLP)</option>
            <option value="COP">Colombian Peso (COP)</option>
            <option value="CRC">Costa Rica Colon (CRC)</option>
            <option value="CZK">Czech Koruna (CZK)</option>
            <option value="DKK">Danish Krone (DKK)</option>
            <option value="EUR">Euro (EUR)</option>
            <option value="GBP">Libra esterlina (GBP)</option>
            <option value="USD">Dólar estadounidense (USD)</option>
            <option value="MXN">Mexican Peso (MXN)</option>
            <option value="PEN">Peruvian Peso (PEN)</option>
          </select>   
        </form>
      </section>  

      <section>
        <form>
          <h2> Vendor General Information</h2>
          <label for="vendorLegalName">Vendor Legal Name:</label>
          <input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>

          <label for="vendorAddress">Vendor Address:</label>
          <input type="text" id="vendorAddress" name="vendorAddress"><br><br>

          <label for="vendorPhoneNumber">Vendor Phone:</label>
          <input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>

          <label for="vendorEmail">Vendor Email:</label>
          <input type="text" id="vendorEmail" name="vendorEmail" required><br><br>

          <label for="vendorServices">Vendor Email:</label>
          <input type="text" id="vendorServices" name="vendorServices" ><br><br>

        </form>
      </section>
      <div class="myinput">
        <input type="submit" value="Enviar">
      </div>
    </div>
  </body>
</html>

Puedes ver mejor los resultados en éste enlace.

5
  • Gracias, me sirvió para que quede visualmente por arriba, pero ahora se desalinea abajo T_T el 11 abr. a las 19:25
  • Ah ok, entiendo... el 11 abr. a las 19:30
  • @AxelLedesma Acabo de modificar mi respuesta, me avisa si esto es lo que deseas. el 11 abr. a las 20:09
  • Muchas gracias por tu ayuda, solamente una duda a pesar de que resolviste toda mi duda. El botón para que se vea abajo en vez de al lado, que tendría que modificar ? el 12 abr. a las 21:57
  • Modifiqué mi respuesta, olvidé centrar el botón el 12 abr. a las 22:07
0

Para el posicionamiento de una caja al lado de otra utilizaremos display, en este caso te muestro tres formas de poder realizar este posicionamiento:

Utilizando inline-block:

Para este caso utilizaremos display: inline-block para poder posicionar el objeto al lado del otro y vertical-align: top para que alineen en la parte superior uno del otro.

section > div {
    background: #006699;
    width: 100px;
    height: 100px;
    margin: 0.5em;
    padding: 1em;

    display: inline-block;
    vertical-align: top;
}
<section>
    <div>Contenido A</div>
    <div>Contenido B</div>
</section>

Utilizando table-cell:

De esta forma se simula una alineación de tabla al utilizar display: table-cell.

section > div {
    background: #006699;
    width: 100px;
    height: 100px;
    padding: 1em;

    display: table-cell;
}
<section>
    <div>Contenido A</div>
    <div>Contenido B</div>
</section>

Utilizando flex:

En este caso utilizamos display: flex; en el contenedor y no así en los objetos que queremos alinear, y también utilizaremos justify-content: center; para poder centrar los objetos.

section {
    display: flex;
    justify-content: center;
    width: 100%;
}
section > div {
    background: #006699;
    width: 100px;
    height: 100px;
    margin: 0.5em;
    padding: 1em;
}
<section>
    <div>Contenido A</div>
    <div>Contenido B</div>
</section>

Para tu caso en especifico:

En tu caso agregué vertical-align: top porque estas usando el primer ejemplo que puse, el otro cambio que realicé es en el form donde el porcentaje estaba muy pequeño siendo que el padre esta a un 40% los hijos deben estar a un 100% en este caso para poder ocupar el máximo.

/* Estilos generales */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F8F8F8;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333333;
}

h2 {
  margin-top: 50px;
  color: #333333;
}

section {
  display: inline-block;
  vertical-align: top;
  width: 40%;
}
form {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #F0F0F0;
  color: #333333;
}

input[type="submit"] {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin: 20px auto;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #333333;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #111111;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  section {
    display: block;
    width: 100%;
    padding: 0;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>New Vendors</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
  </head>
  <body>
    <h1>Creation New Vendors</h1>

    <section>
      <form>
        <h2> Request General Information</h2>
        <label for="person">Requestor:</label>
        <input type="text" id="person" name="person" required><br><br>

        <label for="date">Date of request:</label>
        <input type="date" id="date" name="date" required><br><br>

        <label for="company">Choose Company:</label>
        <select id="company" name="company">
          <option value="eduLLC">Austral Edu LLC</option>
          <option value="servicesLLC">Austral Services LLC</option>
          <option value="australCL">Austral Turismo Brasil Ltda</option>
          <option value="australBR">Servicios Austral Chile Spa</option>
          <option value="australBR">Servicios Austral Peru SRL</option>
        </select>

        <label for="vendor">Supplier's Name:</label>
        <input type="text" id="vendor" name="vendor" required><br><br>

        <label for="currency">Choose currency:</label>
        <select id="currency" name="currency" required>
          <option value="BRL">Brazilian Real (BRL)</option>
          <option value="CAD">Dólar canadiense (CAD)</option>
          <option value="CLP">Chilean Peso (CLP)</option>
          <option value="COP">Colombian Peso (COP)</option>
          <option value="CRC">Costa Rica Colon (CRC)</option>
          <option value="CZK">Czech Koruna (CZK)</option>
          <option value="DKK">Danish Krone (DKK)</option>
          <option value="EUR">Euro (EUR)</option>
          <option value="GBP">Libra esterlina (GBP)</option>
          <option value="USD">Dólar estadounidense (USD)</option>
          <option value="MXN">Mexican Peso (MXN)</option>
          <option value="PEN">Peruvian Peso (PEN)</option>
        </select>   
      </form>
    </section>  

    <section>
      <form>
        <h2> Vendor General Information</h2>
        <label for="vendorLegalName">Vendor Legal Name:</label>
        <input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>

        <label for="vendorAddress">Vendor Address:</label>
        <input type="text" id="vendorAddress" name="vendorAddress"><br><br>

        <label for="vendorPhoneNumber">Vendor Phone:</label>
        <input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>

        <label for="vendorEmail">Vendor Email:</label>
        <input type="text" id="vendorEmail" name="vendorEmail" required><br><br>

        <label for="vendorServices">Vendor Email:</label>
        <input type="text" id="vendorServices" name="vendorServices" ><br><br>

      </form>
    </section>

    <input type="submit" value="Enviar">


  </body>
</html>

Se vería de la siguiente forma:

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.