Publicado em 13 de nov.

Inputs com width % estao atrapalhando

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pt-br' lang='pt-br'>

<head>

 <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 <meta http-equiv='content-language' content='pt-br' />

</head>

<body>
	<div style="width:100%">
 <input type='text' value="80%" style="width: 80%; float: left;">

 <input type='text' value="20%" style="width:20%; float:left;">
	</div>
</body>

</html>

Caso nao seja encomodo, salvem um html com o que esta acima e rodem no firefox.

O firefox adiciona borda e padding dentro desses inputs, se eu tirar fora, fica impossivel de ver o input, mas essa borda e o padding ferram com a porcentagem, porque eu quero que os 2 fiquem um do lado do outro. Tem como resolver isso de alguma forma eficiente? Obs. Nao pretendo usar JS. OBS2.: Pode rodar somente em navegadores atualizados, lixonet explorer nunca sera utilizado, entao pode ser uma solucao que use algo novo.

Thanks a lot,

att paulo

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

ricardo_mc· 14 de nov.

Isso acontece porque os elementos tem margin.

Coloca assim no seu CSS:

Fazendo isso, provavelmente vai resolver seu problema. Se mesmo assim continuar quebrando em algum navegador, deixe 1% de folga para cada Input. Ou seja, coloca a largura de um como 79% e do outro como 19%.

paulojuchem· 14 de nov.

ola ricardo, primeiramente obrigado por responder.

Entao, eu havia pensado nisso e acredito que esta sera a solucao mesmo, a ideia de utilizar dimensoes medidas por porcentagem eh devido a utilizacao nos tablets.

att. paulo.