Input mais submit na mesma linha ocupando a largura total

Input submit
  • 14 de Fev de 2014
  • 5376 Visualizações
  • Seja o primeiro a comentar

Essa semana eu tive um pequeno impasse ao desenvolver um layout responsivo. Eu queria um campo input ao lado de um botão submit e que ocupasse o tamanho total da div externa.

Mas para que isso? Ora, se o site é responsivo o tamanho da div vai variar conforme a tela, certo? Então o campo input e o botão deveriam seguir essa mesma linha de flexibilidade.

A primeira idéia foi alinhar o botão à direita, o campo input a esquerda e fixar a sua largura. Até um certo pronto ficou legal, mas quando abre um determinado tipo de dispositivo o espaçamento entre o campo input e o botão fica muito grande deixando o layout feio. Então a solução foi pesquisar mais até encontrar uma forma mais ideal, vamos lá para o código.

Primeiro o html

<form action="" method="">
  <input type="submit" name="OK" value="OK" class="button">
  <div class="input"><input type="text" name="search"></div>
</form>

Agora o CSS

.button {
  float: right;
}
.input {
  overflow: hidden;
  padding: 0 3px 0 0;
}
.input input {
  width: 100%
}

Perceba que o botão continuou flutuando a direita, mas criei uma div extra para armazenar o campo input e nesta div dei um "overflow: hidden" para que ambos os elementos permaneçam sempre na mesma linha. A partir daí foi só fixar a largura do input como 100%. Fácil não?

TAGS: input, submit, largura total, css, html, tiagomatosweb

Deixe um comentário