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

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