Ir para conteúdo

POWERED BY:

Arquivado

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

klawdyo

Eu quero definir tamanhos para alguns elementos

Recommended Posts

Bom, boa tarde.

Vejam a imagem abaixo.

 

Imagem Postada

 

Como vocês podem ver, os labels "nome" e "email" estão com tamanhos diferentes , e isso acaba quebrando o layout e deixando muuuuuito feio. É freud..

 

Os labels das inputtexts estão dentro da tag <label> e estão formatadas com a class "mural_labels", que, por sua vez só tem "width:200px"

 

Bom é isso. Um problema bem simples mas que não funciona de jeito nenhum.

Alguém pode me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu faria mais ou menos assim:

<style>
*{
margin:0px;
padding:0px;
}
.form{
width:200px;
height:130px;
background:#fc0;
}
.form p {
margin:1px;
float:left;
}
.form input{
margin:1px;
float:right;
}
.form textarea{
margin:1px;
float:right;
width:143px;
}
</style>
<div class="form">
<p>texto</p>
<input type="text" value="Enviar">
<p>campo</p>
<input type="text" value="Enviar">
<p>campo</p>
<textarea></textarea>
<input type="submit" value="Enviar">
</div>

usando o <P> para texto e acaso você queira aplicar alguma TAG para separar os "inputs"

ae fica a seu criterio =]

 

ou usando <label>(pra mim não faz muita diferença do DIV, mas como li que as pessoas recomendam assim =])

<style>
*{
margin:0px;
padding:0px;
}
label{
width:200px;
height:130px;
background:#fc0;
}
label p {
margin:1px;
float:left;
}
label input{
margin:1px;
float:right;
}
label textarea{
margin:1px;
float:right;
width:143px;
}
</style>
<form>
<label>
<p>texto</p>
<input type="text" value="">
<p>campo</p>
<input type="text" value="">
<p>campo</p>
<textarea></textarea>
<input type="submit" value="Enviar">
</label>
</form>
falow

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

Obrigado pela tentativa.. Eu havia acabado de resolver usando uma forma mais simples, aproveitando meu CSS. Foi assim

Meu csss tava assim

#mural label{

width:200px;

}

 

Só bastou eu acrescentar display:inline-block e resolveu.

 

Valeu

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.