0

Tenho o seguinte código:

<span class="input-label">New Password:</span>
<input id="password" type="password" name='password' placeholder="Insert new password">
<br> <span class="input-label">Confirm New Password:</span>
<input id="cpassword" type="password" placeholder="Confirm new password" name="confirmpassword" autocomplete="new-password">
<br>
<input type="submit" name="submit_password">

Pensei que ao usar labels fosse alinhar os inputs, mas não é isso que acontece, como mostra a imagem abaixo.

inserir a descrição da imagem aqui

1 Resposta 1

0

Olá, Diana! Existem vários meios para se fazer isso, vou mostrar um.

A tag span, por padrão, vem com display: inline;, que não funcionará com a propriedade width que irei usar para uma das possíveis soluções para seu problema. Segue abaixo o código CSS, que define um valor fixo para o width e também altera seu display para inline-block, e por fim alinha o texto para direita.

.input-label {
  display: inline-block;
  text-align: right;
  width: 180px;
}

Você pode ver o código funcionando aqui.
Você pode encontrar mais informações sobre display aqui e aqui

Obs* no HTML5 temos uma variedade de elementos semanticamente qualificados para cada tipo de estrutura de uma pagina.html, por exemplo, ao invés de usar span para definir o label, você pode usar a própria tag <label></label>.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .