Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gabriel Fernandez

Alinhamento de labels + inputs

Recommended Posts

bom...

eu fiz um formulario...

ai o formulário.... fico da seguinte forma

 

 

Nome:______ [___input_____]

Data:_______ [___input_____]

...

 

ou seja... label e do lado o campo de texto pra preencher...

só q eu queria por assim...

 

Nome:______ [___input_____] Data:_______ [___input_____]

...

 

Mas quando faço isso não está ficando certo... as vezes sobe apenas o input e o label fica em baixo

como se o meu css num aceitasse dois labels na mesma altura.... mas as vezes eu consigo por dois labels na mesma

linha mas num vem o input alianhado... o unico jeito q eu vi era alinhar tudo com tabela.... mas eu num quero usar tabela pra aliamento pois não se usa mais....

 

 

 

aki meu css:

form{		font-size: 9pt;		font-family:"Trebuchet MS", Verdana, Arial;					}			fieldset{				border-left: 1px solid #ccc;		border-right: 1px solid #ccc;		border-bottom: 1px solid #ccc;		border-top: 1px solid #ccc;			  		  }	legend{			font-weight: bold;			color: #c03;			font-size: 11pt;			letter-spacing: 1px;		}						/* HACK PARA CORRIGIR O MARGIN-BOTTOM*/	html>body #login legend{			margin-bottom: 0px;		}			input{			border-top: 1px solid #333;			border-left: 1px solid #333;			border-bottom: 1px solid #ccc;			border-right: 1px solid #ccc;			font-size: 13px;			margin-bottom: 10px;			color: #0E0659;		}			select{			border: 1px solid #333;			font-size: 13px;			margin-bottom: 10px;			color: #0E0659;		}			label{			display: block;			width: 150px;			float: left;			color: #000;			border-bottom: 1px solid #f1f1f1;		}	 o código na página						<fieldset>					   			<label>Email:</label>						<input name="txt_email" type="text" class="input01" value="" size="30" maxlength="40" />			<br />			<label>Telefone: </label>						<input name="txt_telefone" class="input01" value="" type="text" />			<br />						<label>Celular:</label>						<input name="txt_celular" class="input01" value="" type="text" />			<br />						<label>Cep: </label>						<input name="txt_cep" size="10" maxlength="9" class="input01" value="" type="text" />			<br />						<label>Logradouro: </label>						<input name="txt_logradouro" class="input01" value="" size="40" type="text" />			<br />			<label>Complemento:</label>						<input name="txt_complemento" class="input01" value="" size="40" type="text" />			<br />			<label>Bairro: </label>						<input name="txt_bairro" class="input01" value="" type="text" />			<br />			  <label>Cidade: </label>			  			  <input name="txt_cidade" class="input01" value="" type="text" />			  <br />			<label>UF: </label>						<select name="list_uf" class="input01">			  <option value="" selected="selected"></option>			  <option value="5">ACRE</option>			  <option value="22">ALAGOAS</option>			  <option value="9">AMAPÁ</option>			  <option value="4">AMAZONAS</option>			  <option value="1">BAHIA</option>			  <option value="18">CEARA</option>			  <option value="14">DISTRITO FEDERAL</option>			  <option value="24">ESPIRITO SANTO</option>			  <option value="13">GOIAS</option>			  <option value="16">MARANHÃO</option>			  <option value="11">MATO GROSSO</option>			  <option value="12">MATO GROSSO DO SUL</option>			  <option value="21">MINAS GERAIS</option>			  <option value="10">PARÁ</option>			  <option value="20">PARAIBA</option>			  <option value="3">PARANÁ</option>			  <option value="6">PERNAMBUCO</option>			  <option value="17">PIAUI</option>			  <option value="2">RIO DE JANEIRO</option>			  <option value="19">RIO GRANDE DO NORTE</option>			  <option value="25">RIO GRANDE DO SUL</option>			  <option value="7">RORAIMA</option>			  <option value="8">RORAIMA</option>			  <option value="27">SANTA CATARINA</option>			  <option value="26">SÃO PAULO</option>			  <option value="23">SERGIPE</option>			  <option value="15">TOCANTIS</option>			</select>			<br/>			</div>

* o limite de largura é 575px

**mesmo q eu tire o br... num ta dando certo

*** eu coloquei um float right na label... mas ele perdeu a borda... e a margen entre o input e o label e no firefox ele fica desalinhado

**** o site é feito especialmente pra IE

Compartilhar este post


Link para o post
Compartilhar em outros sites

Editado.

 

O código deve ser colocado entre a tag :

 

 

Até Mais...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.