Alinhando texto e a caixa de input

6 de fevereiro de 2017 3 respostas

Robsonjunior1994 6 de fevereiro de 2017

Olá, eu queria alinhar Matrícula e embaixo certinho Senha, tipo o S em baixo do M certinho e a caixa onde escreve o texto uma alinhada do outro

<head>
		<title>Pagina Principal</title>
		<link rel="stylesheet" href="estilos.css">
	</head>
	<body>
		<div id="faixa-azul">
		<figure id="logo_santoAntonio">
		<img src="logo-santo-antonio.png" alt="Alternativa caso a img não apareca" >
		<figcaption></figcaption>
		</figure>
			
			<div id="login">
				<form>
					Matrícula: <input id="editor-login" type=text><br><br>
					Senha:     <input id="editor-login" type=password><br><br>
					<input type=button value="Entrar">
				</form>
			</div>
		
		</div>
		<hr/>
		
		<!-- 
		<nav class="menu-opcoes">
		<ul class="centro">
			<a href="#"><li>Inicio</li></a>
			<a href="#"><li>Provas</li></a>
			<a href="index.html"><li>Sobre</li></a>
			<a href="curriculo.html"><li>Currículo</li></a>
			
		<ul>
		</nav>
		-->

		
		
		<form>
		</form>
	</body>
</html>

3 Respostas

leanfj 13 de fev. de 2017

Fala Robson beleza. Fiz um teste no jsfiddle https://jsfiddle.net/ere0m3hz/ veja se seria isso. Uma coisa que notei que tem de errado o id dos input são iguais da uma olha no código que fiz vê se te ajuda.

Robsonjunior1994 3 de mar. de 2017 1 like

Obrigado pela ajuda, eu consegui da seguinte forma!

HTML

<form id="formulario-de-nota">
    		<fieldset>
    			<legend>Informe suas notas</legend>
    			<label for="nota1">Nota 1:</label>
    			<input type="text" id="nota1"><br />
    			
    			<label for="nota2">Nota 2:</label>
    			<input type="text" id="nota2"><br />
    			
    			<label for="nota3">Nota 3:</label>
    			<input type="text" id="nota3"><br />
    			
    			<label for="nota3">Media:</label>
    			<input type="text" id="media" readonly><br /><br />
    			
    			<input type="button" id="verificar" onclick="calcularNota()" value="Verificar">
    			
    			
    		
    		</fieldset>
    	</form>

CSS

/* Colocando O FORMULARIO ALINHADA
	Transforma em BLOCO
*/
label {
	display: block;
	float: left;
}

/*/Define um tamanho, impedindo que fiquem desalinhados*/

label, input {
	width:68px;
	margin: 3px 0;
}

/* AUMENTA A largura do INPUT*/
input {
	width:100px;
}

/*Define uma largura para a parte subliada de fora*/
fieldset {
	
	width:200px;

}

leanfj 7 de mar. de 2017

Show mano blz, que bom que vc conseguiu . Qualquer coisa estamos ai.

Criado 6 de fevereiro de 2017

Ultima resposta 7 de mar. de 2017

Respostas 3

Participantes 2

3 Respostas

HTML

CSS

Topicos relacionados