Como posso controlar a largura de uma etiqueta de etiqueta?

144

A tag label não possui a propriedade 'width', então como devo controlar a largura de uma tag label?

html css label ziiweb
fonte
8
Label é um elemento embutido, não pode ter valor de largura; para fazer isso, você precisa colocar display:blockou float:left.
Russell Dias

Respostas:

188

Usando CSS, é claro ...

label { display: block; width: 100px; }

O widthatributo foi descontinuado e o CSS sempre deve ser usado para controlar esses tipos de estilos de apresentação.

Josh Stodola
fonte
7
Mas isso leva a uma quebra no código, que é provavelmente o que o OP não quer em primeiro lugar.
Konrad Rudolph
49
@Konrad Então o OP pode usar floatoudisplay: inline-block
Josh Stodola
2
Sim, era nisso que eu queria chegar. :-) Este é o aspecto principal aqui, já que é a parte difícil. Apenas definir widthnão terá muita utilidade.
Konrad Rudolph
@ JoshStodola oh shiiiiit ..... o bloco inline nunca funcionou para mim, tentei flutuar e bham! Eu me pergunto por que o trabalho inline-block did't para mim
Dheeraj
O @lostchild inline-block não ignora os espaços em branco, pode ser por isso que você estava tendo problemas com ele.
Alex Podworny
91

Usar o bloco embutido é melhor porque não força os elementos e / ou controles restantes a serem desenhados em uma nova linha.

label {
  width:200px;
  display: inline-block;
}
MA9H
fonte
29

Os elementos embutidos (como SPAN, LABEL etc.) são exibidos para que sua altura e largura sejam calculadas pelo navegador com base em seu conteúdo. Para controlar a altura e a largura, é necessário alterar os blocos desses elementos.

display: block;torna o elemento exibido como um bloco sólido (como tags DIV), o que significa que há uma quebra de linha após o elemento (não está embutido). Embora você possa usar display: inline-blockpara corrigir o problema de quebra de linha, esta solução não funciona no IE6 porque o IE6 não reconhece o bloco embutido. Se você deseja que ele seja compatível com vários navegadores, consulte este artigo: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Srka
fonte
4

Dar largura ao Label não é uma maneira adequada. você deve usar uma div ou estrutura de tabela para gerenciar isso. mas ainda assim, se você não quiser alterar todo o código, poderá usar o código a seguir.

label {
  width:200px;
  float: left;
}
Yaxita Shah
fonte
"Dar largura ao Label de maneira inadequada" para controlar a largura de um elemento do label? Você tem certeza?
Oriol
Sim. Porque quando queremos criar algum layout ou estrutura específica, as propriedades div e table são fornecidas para uso. O rótulo não se destina a fornecer largura ou altura. Portanto, se usarmos algo que não se destina a isso, ele começará a criar problemas de alguma maneira. Espero estar fazendo sentido agora.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
brilhante
fonte
1

Você pode definitivamente tentar dessa maneira 

.col-form-label{
  display: inline-block;
  width:200px;}
Akarsh Srivastava
fonte
0

Você pode atribuir o nome da classe a todos os rótulos, para que todos possam ter a mesma largura:

 .class-name {  width:200px;}

Exemplo 

.labelname{  width:200px;}

ou você pode simplesmente dar o restante do rótulo 

label {  width:200px;  display: inline-block;}
Ajinkya
fonte