How do I place the checkbox next to the label?

Asked

Viewed 24 times

-2

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sneake</title>

    <style>
      
      body{
          font-family: Gilroy,sans-serif;
          font-weight: 700;
          font-size: 32px;
          line-height: 32px;
      }

      .formulario{
        font-size: 20px;
        width: 400px;
        height: 550px;
        background: #F3F3F3;
        float: right;
        text-align: center;
        margin: 30px;
      }

      .formulario input{
          color: gray;
          width: 300px;
          height: 30px;
          border-radius: 10px;
          margin: 8px;
      }

      textarea{
          width: 300px;
          height: 200px;
          margin: 8px;
          border-radius: 10px;
      }
      .caixa-selecao{
          font-size: 12px;
          border: 1px solid red;

      }

     .botao{
         border: 1px solid black;
         padding: 15px 120px;
         border-radius: 10px;
         line-height: 20px;
         font-weight: bold;   
         cursor: pointer;
     }

    </style>

</head>
<body>

    <div>
        <h1>Corra</h1> 
        <h1>como se o mundo</h1> 
        <h1>dependesse de você</h1>
        <img>
    </div>


        <form class="formulario">
            <h2>Contacte-nos</h2>
            <input type="text" placeholder="Nome"><br>
            <input type="email" placeholder="email"><br>
            
            <textarea placeholder="comentários"></textarea>

            <div class="caixa-selecao">
                <label>Concordo com a política de privacidade</label>
                <input type="checkbox">
            </div>
           
            <button class="botao">Enviar dados</button>
            
        </form>    
</body>
</html>

enter the code here

html css

  • Dude but your input is 300px wide.... and your 400px form, how you want it to fit the text

  • 1

    @hugocsl a good solution to his case would be to put a .formulario input[type="checkbox"] and define a width: auto;? It was the first thing I thought :)

1 answer

0

Because of your .formulario input where you set width: 300px;, this is also doing its <input type="checkbox" /> had width of 300px, and because your form has a limit of 400px;, this causes your text and input to be displayed on different lines and not side by side.

To solve this, and by trying to keep your code the way it is, simply add a property in the CSS to override the width checkbox. Just add, soon after .formulario input{...}, the following property:

.formulario input[type='checkbox'] {
   width: auto;
 }

This will make the checkbox have a width set automatically and will cause the text to be displayed next to the input.

See how it looks:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sneake</title>

    <style>
      body {
        font-family: Gilroy, sans-serif;
        font-weight: 700;
        font-size: 32px;
        line-height: 32px;
      }

      .formulario {
        font-size: 20px;
        width: 400px;
        height: 550px;
        background: #f3f3f3;
        float: right;
        text-align: center;
        margin: 30px;
      }

      .formulario input {
        color: gray;
        width: 300px;
        height: 30px;
        border-radius: 10px;
        margin: 8px;
      }

      .formulario input[type='checkbox'] {
        width: auto;
      }

      textarea {
        width: 300px;
        height: 200px;
        margin: 8px;
        border-radius: 10px;
      }
      .caixa-selecao {
        font-size: 12px;
        border: 1px solid red;
      }

      .botao {
        border: 1px solid black;
        padding: 15px 120px;
        border-radius: 10px;
        line-height: 20px;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Corra</h1>
      <h1>como se o mundo</h1>
      <h1>dependesse de você</h1>
      <img />
    </div>

    <form class="formulario">
      <h2>Contacte-nos</h2>
      <input type="text" placeholder="Nome" /><br />
      <input type="email" placeholder="email" /><br />

      <textarea placeholder="comentários"></textarea>

      <div class="caixa-selecao">
        <label>Concordo com a política de privacidade</label>
        <input type="checkbox" />
      </div>

      <button class="botao">Enviar dados</button>
    </form>
  </body>
</html>

To look good...

You didn’t get a nice alignment, did you? I can suggest that you align the label with the input to make it more beautiful. For that, on your property .caixa-selecao, you can add a display: flex; and make the vertical and horizontal alignment centralized, using align-items: center; and justify-content: center;.

Your .caixa-selecao would look like this:

 .caixa-selecao {
   font-size: 12px;
   border: 1px solid red;
   display: flex;
   align-items: center;
   justify-content: center;
 }

See the result:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sneake</title>

    <style>
      body {
        font-family: Gilroy, sans-serif;
        font-weight: 700;
        font-size: 32px;
        line-height: 32px;
      }

      .formulario {
        font-size: 20px;
        width: 400px;
        height: 550px;
        background: #f3f3f3;
        float: right;
        text-align: center;
        margin: 30px;
      }

      .formulario input {
        color: gray;
        width: 300px;
        height: 30px;
        border-radius: 10px;
        margin: 8px;
      }

      .formulario input[type='checkbox'] {
        width: auto;
      }

      textarea {
        width: 300px;
        height: 200px;
        margin: 8px;
        border-radius: 10px;
      }
      .caixa-selecao {
        font-size: 12px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .botao {
        border: 1px solid black;
        padding: 15px 120px;
        border-radius: 10px;
        line-height: 20px;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Corra</h1>
      <h1>como se o mundo</h1>
      <h1>dependesse de você</h1>
      <img />
    </div>

    <form class="formulario">
      <h2>Contacte-nos</h2>
      <input type="text" placeholder="Nome" /><br />
      <input type="email" placeholder="email" /><br />

      <textarea placeholder="comentários"></textarea>

      <div class="caixa-selecao">
        <label>Concordo com a política de privacidade</label>
        <input type="checkbox" />
      </div>

      <button class="botao">Enviar dados</button>
    </form>
  </body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.