CSS: Possibilitando o atributo “width” na tag “label”

Muitos desenvolvedores se deparam com este problema.

Na hora de criar um formulário, nos padrões CSS, se utiliza a tag label ao invés das tabelas (tag table).

Porém a tag label é um elemento inline e ao setar o atributo width (largura) não acontece.

Para que os navegadores aceitem o valor de “width” é necessário alguns ajustes. Segue código de exemplo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS - Label</title>
<style type="text/css" media="all">
body{color:#FFFFFF}
.label_normal{width:85px;background-color:#000}
.label_1{width:85px;float:left;display:block;background-color:#000}
.label_2{width:85px;float:left;background-color:#FF0000}
.label_3{width:85px;display:block;background-color:#000}
</style>
</head>
<body>
<form name="frm_teste" action="" method="post">
  <label for="descricao" class="label_normal">descrição:</label> 
  <input type="text" name="descricao" value="normal" />
  <br /><br />
  <label for="descricao" class="label_1">descrição:</label> 
  <input type="text" name="descricao" value="float:left e display:block" />
  <br /><br />
  <label for="descricao" class="label_2">descrição:</label> 
  <input type="text" name="descricao" value="float:left" />
  <br /><br />
  <label for="descricao" class="label_3">descrição:</label> 
  <input type="text" name="descricao" value="display:block" />
</form>
</body>
</html>

Explicando:

A grande jogada para resolver este problema está na utilização do float:left e display:block.

Até +.

4 comentários em “CSS: Possibilitando o atributo “width” na tag “label”

  • 22 de setembro de 2011 em 16:59
    Permalink

    Muito boa sua Dica! me ajudou muito

    Resposta
  • 1 de novembro de 2012 em 13:45
    Permalink

    Que ajustes são necessários para que o atributo “Width” possa ser usado na tag “Label”?

    Resposta
    • 1 de novembro de 2012 em 14:12
      Permalink

      Fala Ernani,

      basta que você utilize float:left e display:block para que o width funcione.

      Resposta
  • 1 de novembro de 2012 em 16:37
    Permalink

    Muito obrigado Tiago, estava a tempo atras da resposta, funcionou!!!
    🙂

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *