How to align items with HTML and CSS?

Question

How to align items with HTML and CSS?

Navigation

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

0

I'm having trouble aligning items again.

I would like them to align the 3 inputs on the same line with margin, however they go down.

#contato {
  margin-top: 120px;
}

#contato form {
  width: 100%
}

#contato form input {
  width: 33%;
  float: left;
  box-sizing: content-box;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
  margin: 10px;
}

#contato form textarea {
  float: right;
  width: 100%;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
}

<div class="container">
  <div id="contato">
    <h2>Fale conosco</h2>
    <div class="trbar"></div>
    <form action="">
      <input type="text" name="nome" placeholder="Nome">
      <input type="email" name="email" placeholder="Email">
      <input type="text" name="fone" placeholder="Fone">
      <textarea name="mensagem" placeholder="Digite sua mensagem..."></textarea>
    </form>
  </div>
</div>

html html5 css css3

asked by anonymous 03.07.2018 / 20:46

2 answers

4

I've replicated your example using Flexbox

#contato {
  margin-top: 120px;
}

#contato form {
  width: 100%
  display: flex;
}

.input-flex {
    display: flex;
}

.input-flex > input {
    width: 33%;
}

#contato form input {
  box-sizing: content-box;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
  margin: 10px;
}

#contato form textarea {
    width: 94%;
    font: 400 18px 'Open Sans', sans-serif;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #aaa;
    margin: 10px;
}

<div class="container">
  <div id="contato">
    <h2>Fale conosco</h2>
    <div class="trbar"></div>
    <form action="">
      <div class="input-flex">
          <input type="text" name="nome" placeholder="Nome">
          <input type="email" name="email" placeholder="Email">
          <input type="text" name="fone" placeholder="Fone">
      </div>
      <textarea name="mensagem" placeholder="Digite sua mensagem..."></textarea>
    </form>
  </div>
</div>

03.07.2018 / 20:56

How to create a link to without giving refresh Dynamic allocation with a void function

score 4 · Accepted Answer

Do so

#contato {
  margin-top: 120px;
}

#contato form {
  width: 100%
}

#contato form input {
  width: calc(33% - 20px);
  float: left;
  box-sizing: content-box;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
  margin: 10px;
  box-sizing: border-box;
}

#contato form textarea {
  float: right;
  width: 100%;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
}

<div class="container">
  <div id="contato">
    <h2>Fale conosco</h2>
    <div class="trbar"></div>
    <form action="">
      <input type="text" name="nome" placeholder="Nome">
      <input type="email" name="email" placeholder="Email">
      <input type="text" name="fone" placeholder="Fone">
      <textarea name="mensagem" placeholder="Digite sua mensagem..."></textarea>
    </form>
  </div>
</div>

In the example above, I added the value of width to calc(33% -20px) . But why? Because since you have used margin: 10px , the space of 10px for each side counts as space of input , and this causes it to "push" the element down, when it exceeds 100% . So by using -20px I'm tailoring the value to fit within #contato form .

In addition, I put box-sizing: border-box , which forces CSS to calculate the size of the element along with padding and border , thus avoiding the old calculations we had to do on hand, to hit the size of the element after using these attributes.

In this case, box-sizing is only used to adjust the value of padding and border , so margin still needs to be "calculated".