0

Novamente estou com dificuldade em alinhar itens.

Gostaria que eles ficassem alinhadas os 3 inputs na mesma linha com margin, porém eles descem.

#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>

2 Respostas 2

4

Faça assim

#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>

No exemplo acima, adicionei ao valor de width o calc(33% -20px). Mas por quê? Porque, como você usou margin: 10px, o espaço de 10px para cada lado conta como espaço do input, e isso faz ele "empurrar" o elemento para baixo, quando ultrapassa os 100%. Por isso, ao usar -20px eu estou adaptando o valor para caber dentro do #contato form.

Além disso, eu coloquei box-sizing: border-box, que força o CSS a calcular o tamanho do elemento junto com o padding e border, evitando assim os antigos cálculos que tínhamos que fazer na mão, para acertar o tamanho do elemento depois de usar esses atributos.

No caso, box-sizing só serve para ajustar o valor do padding e border, então o margin ainda precisa ser "calculado".

4

Repliquei seu exemplo usando 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>

2
  • 1
    +1. Flexbox é uma boa, só que eu estava sem tempo de fazer um exemplo, kkkkk Commented 3/07/2018 às 18:57
  • KKK o que tem que consertar é o textarea, pra ficar no tamanho dos inputs, mas tem um calculozinho que vou ver se faço aqui depois kk mas, por mim, eu não colocaria 3 inputs juntos, fica meio embolado. Commented 3/07/2018 às 18:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .