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?

 129
Author: ziiweb, 2010-05-12

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.

 160
Author: Josh Stodola, 2010-05-12 16:05:27

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;
}
 76
Author: M009, 2016-05-04 20:58:09

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

 27
Author: Srka, 2014-03-24 19:31:36

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;
}
 4
Author: Yaxita Shah, 2015-08-10 14:03:52
label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}
 2
Author: shiny, 2014-01-09 05:48:50

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;}
 0
Author: Ajinkya, 2016-01-21 07:36:37