Ir para conteúdo

POWERED BY:

Arquivado

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

André Severino

[Resolvido] Criar formulario sem uso do <br>

Por , em Desenvolvimento frontend

Recommended Posts

André Severino    3

André Severino
Postado

Bom dia pessoal, eu fiz o seguinte formulário:

 

<form>
<fieldset>
  <label><strong>Nome:</strong> <input type="text" name="nome" /></label>
  <label><strong>Sobrenome:</strong> <input type="text" name="sobrenome" /></label>
  <label><strong>Email:</strong> <input type="text" name="email" /></label>
</fieldset>
<button type="submit">Enviar</submit>
</form>

 

Mas eu não consigo deixar ele alinhado como se fosse 2 colunas. Só consigo deixar alinhado, se eu der um <br>

<label>...</label> <br>

E também usar um style="margin-left:30px;" em cada um dos elementos

name="email" style="margin-left:32px;" /></label><br>

name="email" style="margin-left:20px;" /></label><br>

name="email" style="margin-left:28px;" /></label><br>

 

Tem como eu fazer sem usar isso? o br e as estilizações inline ?

 

Agradeço as dicas desde já. Abraços e até mais :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

label { display: block; margin-left: 30px; }

mostre como você queria o alinhamento.. acredito que um text-align: right; resolve..

 

mas preciso ver o efeito que você esta tentando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francispansa    6

Francispansa
Postado

 

Mas eu não consigo deixar ele alinhado como se fosse 2 colunas. Só consigo deixar alinhado, se eu der um <br>

<label>...</label> <br>

 

Você quer alinhar em "colunas"? não seriam linhas? Porque o <br/> da uma quebra de linha.

 

Caso queira utilizar em linhas você pode fazer o seguinte..

 

form label{
display:block;
/* caso não resolva sete um float também */
float:left; 
}

 

Quaquer coisa dá um grito ae.. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Severino    3

André Severino
Postado

Bom dia William e Francispansa, o efeito que eu queria era esse mesmo, mas apenas com o display:block e o text-align right já resolveu.

 

Abaixo o código.

<html>
<head>
<title>Titulo</title>
<style type="text/css">
 form{width:260px;}
 label { display: block; text-align:right; }
</style>
</head>

<body>
<form>
<fieldset>
  <label>Nome: <input type="text" name="nome" /></label>
  <label>Sobrenome: <input type="text" name="sobrenome" /></label>
  <label>Email: <input type="text" name="email" /></label>
</fieldset>
<button type="submit">Enviar</button>
</form>
</body>
</html>

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