Como posso controlar a largura de uma etiqueta?
A etiqueta não tem a propriedade 'width', então como devo controlar a largura de uma etiqueta?
6 answers
Usando CSS, claro...
label { display: block; width: 100px; }
O atributo width
está desactualizado, e o CSS deve ser sempre usado para controlar estes tipos de estilos de apresentação.
Usar o bloco em linha é melhor porque não obriga os restantes elementos e / ou comandos a serem desenhados numa nova linha.
label {
width:200px;
display: inline-block;
}
Elementos incorporados (como a calibração, o rótulo, etc.) são exibidos de modo que sua altura e largura são calculadas pelo navegador com base em seu conteúdo. Se quiser controlar a altura e a largura, terá de alterar os blocos desses elementos.
display: block;
torna o elemento mostrado como um bloco sólido (como as tags DIV), o que significa que há uma quebra de linha após o elemento (não é inline). Embora você possa usar display: inline-block
para corrigir a questão da quebra de linha, Esta solução não funciona no IE6 porque o IE6 não reconhece o bloco inline. Se quiser que seja compatível com o cross-browser, veja este artigo: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html
Dar largura ao rótulo não é uma forma adequada. você deve tomar um div ou estrutura de mesa para gerenciar isso. mas ainda assim se você não quiser alterar todo o seu código, então você pode usar o seguinte código.
label {
width:200px;
float: left;
}
label {
width:200px;
display: inline-block;
}
OR
label {
width:200px;
display: inline-flex;
}
OR
label {
width:200px;
display: inline-table;
}
Você pode dar o nome da classe a toda etiqueta para que todos possam ter a mesma largura:
.class-name { width:200px;}
Exemplo
.labelname{ width:200px;}
Ou podes simplesmente dar o resto do rótulo
label { width:200px; display: inline-block;}