Ir para conteúdo

POWERED BY:

Arquivado

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

paulojuchem

Inputs com width % estao atrapalhando

Por , em Desenvolvimento frontend

Recommended Posts

paulojuchem    20

paulojuchem
Postado 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<!--
"WEB 3 INC. - Soluções Web;
-->
<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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricardo_mc    19

ricardo_mc
Postado

Isso acontece porque os elementos tem margin.

 

Coloca assim no seu CSS:

 

<style>
*{margin:0;padding:0;}
input[type="text"]{border:1px solid #000;}
</style>

 

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%.

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito