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é +.
Muito boa sua Dica! me ajudou muito
Que ajustes são necessários para que o atributo “Width” possa ser usado na tag “Label”?
Fala Ernani,
basta que você utilize float:left e display:block para que o width funcione.
Muito obrigado Tiago, estava a tempo atras da resposta, funcionou!!!
🙂