Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho uma pagina com um trecho parecido com esse:
<style>
#f{
position:absolute;
top:50px;
left:10%;
right:10%;
margin:0 60px;
}
#f input[type=text]{
position:absolute;
left:3px;
right:105px;
}
#f input[type=submit]{
position:absolute;
right:2px;
display:block;
width:100px;
}
</style>
<form id="f">
<input type="text">
<input type="submit">
</form>Porem ao testar tanto no chrome quanto no firefox obtenho um campo de tamanho fixo que não ocupa todo o espaço dentro da form como também excede a largura da form quando ela é menor que essa largura fixa.
Alguém sabe como contornar isso?
Bom, não acredito que colocar o botão de submit com dimensões percentuais seja uma boa ideia.
Seria bom também as margens da pagina em porcentagem porque assim elas não desperdiçam muito espaço em resoluções pequenas e evitam que o usuário desloque muito o campo de visão em resoluções maiores.
Se o "input type text" fosse substituido por uma div, por exemplo, as dimensões obtidas seriam exatamente o que desejo.
Porém isso não funciona para o input.
Obtive uma soluão paleativa com:
<style>
#f{
position:absolute;
top:50px;
left:10%;
right:10%;
margin:0 60px;
}
#f div{
position:absolute;
left:3px;
right:80px;
}
#f input[type=text]{
width:100%;
padding-left:15px;
padding-right:10px;
}
#f input[type=submit]{
position:absolute;
right:2px;
display:block;
width:100px;
}
</style>
<form id="f">
<div><input type="text"></div>
<input type="submit">
</form>Alguém tem alguma sugestão para contornar isso?
Quando vc cria um elemento e n diz qual o tamanho dele, ele ficar com tamanho total que ele pode ocupar
Quando for usar medidas(Ex: %) relativas tente usa-las por todo o site.
se vc quer que um elemento filho pegue o mesmo tamanho do elemento pai vc precisa especificar o WIDTH: 100%;
se o elemento pai for redimensionado o elemento filho também é redimensionado