1

Tenho dificuldade em posicionar controles, do tipo: Tenho um TextArea e gostaria de colocar um label ao lado dele, ao lado da parte inferior direita e abaixo do label, um controle SELECT.

Bem eu tenho conseguido, mas tipo assim, dando top e left com valores numéricos, o que eu não gosto muito, devido as inconsistências dos browsers. Há uma forma mais prática, mais confiável de se posicionar sem ter que estar fixando numericamente o controle?

Coloquei uma imagem e essa imagem está ligeiramente abaixo do label, isso faz com que eu tenha um espaço a mais entre um e outro. Veja o código completo abaixo.

<form class="form-horizontal" role="form">

      <div class="form-group">
        <label for="lblCnpj" class="col-md-2 control-label">CNPJ:</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
        </div>
          <label for="lblStatus" class="col-md-2 control-label">Status:</label>
          <div class="col-md-4">
              <img src="~/Images/Certo.png" class="col-md-2 control-label"/>
        </div>
      </div>

       <div class="form-group">
        <label for="lblRazao" class="col-md-2 control-label">Razão Social:</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
        </div>
      </div>

       <div class="form-group">
        <label for="lblIdEvento" class="col-md-2 control-label">ID Evento:</label>
        <div class="col-md-2">
          <input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
        </div>
      </div>

   </form>

2 Respostas 2

2

Use um sistema de grids, como o Twitter Bootstrap. Segue exemplo de formulário com uso do sistema de grids do mesmo:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

inserir a descrição da imagem aqui

5
  • Então, mas como eu faço com o CSS nesse caso?
    – pnet
    Commented 24/06/2014 às 12:58
  • Preciso instalar o bootstrap? Fui rodar esse exemplo, e até aí ok, agora o difícil será como posicionar um TextArea e ao lado dele na parte inferior direita, posicionar mais controles.
    – pnet
    Commented 24/06/2014 às 13:06
  • Você precisa estudar o esquema de grids do Bootstrap para saber como usar corretamente. Perca uns 3 dias de trabalho e se dedique a isso, o ganho posterior de produtividade será compensador. Commented 24/06/2014 às 15:04
  • O Bootstrap é uma biblioteca CSS, basta usá-la! Eles têm links de CDN no site Commented 24/06/2014 às 15:05
  • Estou começando a usar. Só estou com dificuldade é de colocar um controle ao lado do outro e não consegui colocar o label em cima e o textbox logo abaixo. Mas preciso ler mais, três dias em 4 horas, é meu tempo.
    – pnet
    Commented 24/06/2014 às 17:32
0

Sem o uso de framework e sem fixar numericamente o conteúdo, seria interessante limitar o seu conteúdo do formulário dentro de uma div, e posicioná-los com um determinado padding, usando o posicionamento flutuante:

float: left; //left/center/right

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 .