Ir para conteúdo

POWERED BY:

Arquivado

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

New Web Design

[Resolvido] Alinhar inputs do tipo radio lado a lado

Por , em Desenvolvimento frontend

Recommended Posts

New Web Design    0

New Web Design
Postado

Olá pessoal

Mais uma vez estou aqui com mais um problema que me arranca os cabelos http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

Preciso alinhar lado a lado um span contenco a palavra "sexo" e dois radios (masculino e feminino) que estão dentro de um label

 

segue um trecho do codigo html:

<label>
	<span>Sexo</span>

	<label for='m' class="sexo">
						 <input id='m' type="radio" name="gender" id="gender" value="m"> Masculino
			</label>  

	<label for='f' class="sexo">
						 <input id='f' type="radio" name="gender" id="gender" value="f">  Feminino
			</label>
</label>

e o codigo CSS:

fieldset label {
	display:table;
	width:100%;
	height:20px;
	clear:both;
	background-color:transparent;
	position:relative;
	white-space: nowrap;
}

aquele nowrap eu tinha pesquisado e fiquei sabendo que serve para impedir a quebra de linha feita pelos elementos de bloco, mas ñ deu ceto no meu codigo

testei no IE 6, FF 3 e no opera, mas em nenhu funcionou.

 

Espero ter me explicado bem, mas se for necessário postar o codigo inteiro é só pedir

 

desde já fico agradecio com toda a ajuda

valeu galera http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Eu faria assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Thiago Retondar" />
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}	
fieldset {
   display:table;
   width:100%;
   height:40px;
   clear:both;
   background-color:transparent;
   position:relative;
}
label {
	float: left;
}
</style>
<title>Untitled 1</title>
</head>

<body>
<form action="">
<fieldset>
   <legend>Sexo</legend>
   <label for='m' class="sexo"><input id='m' type="radio" name="gender" id="gender" value="m">Masculino</label>

   <label for='f' class="sexo"><input id='f' type="radio" name="gender" id="gender" value="f">Feminino</label>
</fieldset>
</form> 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Pode fazer assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Teste com radio buttons</title>
	<style type="text/css">
	* {
		margin:0;
		padding:0;
	}
	form fieldset {
		margin:20px;
		padding:20px;
	}
	form fieldset label {
		display:inline;
		float:left;
		width:100px;
		height:22px;
		line-height:22px;
		text-align:left;
		font-weight:normal;
		font-size:80%;
		color:#333;
		margin:6px 10px 0 0;
		overflow:hidden;
	}
	form fieldset label input {
		display:inline;
		float:left;
		width:auto;
		height:22px;
		line-height:22px;
		margin:0 3px 0 0;
		padding:0;
		border:none;
	}
	</style>
</head>
<body>
	<form action="#" method="post">
		<fieldset>
			<legend>Sexo</legend>
			<label for="m"><input type="radio" name="sexo" id="m" value="m" /> Masculino</label>
			<label for="f"><input type="radio" name="sexo" id="f" value="f" /> Feminino</label>
		</fieldset>
	</form>
</body>
</html>
Agora é só adaptar para suas necessidades...

 

Ah! Só para complementar, a propriedade white-space controla a quebra automática de linha, assim como faz a tag <pre>. Veja essa propriedade em funcionamento:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Disable text wrapping inside an element

Esse link abre um editor do W3Schools. Na parte da esquerda, você tem a propriedade white-space definida com um nowrap. Veja que a parte da direita, onde é exibido o resultado, está com uma barra de rolagem horizontal. Agora altere o white-space para normal e clique no botão Edit and Click Me >>, e observe o resultado nessa mesma parte à direita.

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

New Web Design    0

New Web Design
Postado

Paulo testei o seu tbm.

 

porém os inputs continuaram ficam uma linha abaixo do rotulo "sexo"

 

Mas quando acrencentei a solução do thiago deu certo tbm.

 

A conclusão que tirei é que a solução desse problema é utilizar um span para o rotulo e colocar junto com o input dentro de fieldset e mandar todo mundo flutuar a esquerda.

 

bem

mais uma vez valeu por toda a ajuda

brigadão

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

New,

 

só queria te dar a dica desse tópico aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?showtopic=180880

 

Agora que seu problema foi sanado, analise seu primeiro código e compare com os que foi ajudado. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Por exemplo no seu CSS:

 

fieldset label {
	display:table;
	width:100%;
	height:20px;
	clear:both;
	background-color:transparent;
	position:relative;
	white-space: nowrap;
}

Se você queria que ficasse lado-a-lado, não tinha porque usar clear: both, entende?

 

Abraços, e força com seus estudos. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

New Web Design    0

New Web Design
Postado

valeu thiago

 

mas mesmo sem o clear:both; ainda estava ficando errado. embora de fato pela lógica ele ñ deveria estar ali, eu acho.

 

de qaulquer forma o problema foi resolvido

 

li tbm o outro post q você colou aí

 

realmente eu ñ faza nem metade daquilo. mas vou por isso em pratica tbm

 

valeu mesmo pela ajuda pessoal

e desculpa a demora na resposta

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