2

Preciso posicionar controles labels, exatamente um em baixo do outro e às vezes ao lado. Faço isso com table, mas pergunto. Existe outra forma de fazer isso e dar um resultado semelhante a table? Table é braçal, e tudo meu é dinâmico.

1
  • 1
    Tabelas são para exibir dados em formato tabular. Para layout, o recomendado é usar CSS. Isso não precisa ser levado a ferro e fogo, é claro, mas de um modo geral tudo o que pode ser feito com table pode também ser feito com CSS, você só precisa tirar um tempinho pra aprender. E se seu conteúdo é dinâmico ainda por cima, o benefício de se usar CSS fica ainda maior: porque você não precisa mexer no código que gera o markup quando você só quer alterar a apresentação/aparência.
    – mgibsonbr
    Commented 8/05/2014 às 1:50

2 Respostas 2

2

Por que fugir das tables? Elas estão aí para serem utilizadas (só não vai utilizar elas para posicionar layout, por favor). Enfim, claro que há.

Considere o seguinte HTML:

<form action="">

<fieldset>
<legend>Nosso form</legend>

<label><span>Nome:</span>
<input type="text" size="25" /></label>

<label><span>Idade:</span>
<input type="text" size="25" /></label>

<label><span>Besteiras:</span>
<textarea rows="10" cols="23"></textarea></label>

<label><span>Nome de novo:</span>
<input type="text" size="25" /></label>

<div><input type="submit" class="submit" 
            name="submit" value="Enviar" /></div>

</fieldset>
</form>

Temos aqui nosso primeiro exemplo:

fieldset span { float: left; width: 6em; text-align: right; }
label { display: block; margin: 0; padding: 0;}
input, textarea { text-align: left; }
input.submit    { text-align: center; }

exemplo 1

Segundo exemplo, só que mais elegante:

fieldset span { float: left; width: 6em; text-align: right; }
label { display: block; margin: 0; padding: 0;}
input, textarea { text-align: left; }
input.submit    { text-align: center; }

body   { font-size: 80%; }
label, input.submit, legend, fieldset { font: normal 1em 
       Verdana, Geneva, Arial, Helvetica, sans-serif; }


legend { padding: 1em; }
label  { margin: 0.5em; }
fieldset { padding: 1em; }
fieldset div  { margin: 0.5em; padding-left: 6.5em; }
fieldset span { padding-right: 0.5em; }

exemplo 2

1
  • 1
    Bons exemplos. Mas a resposta só mereceria um +1 (da minha parte) se os detalhes fossem explicados. :) Commented 8/05/2014 às 1:09
2

O Bootstrap usa uma estrutura de grid que te ajudaria muito.

Veja a documentação oficial aqui.

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 .