Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Duvida CSS

por Anny Karolainy Leal Silva
| 59.6k xp | 16 posts
Jovem Aprendiz

Boa tarde! Gostaria de algumas ideias de como eu poderia ajustar o alinhamento dessa seguinte forme

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeonde o final dos input de moeda ficariam na direita, tentei o justify-content: right porem nao funcionou 

<div class="form-row">
      <div class="col-6">
        <label></label>
        <input type="text"  [(ngModel)] = "campo1" placeholder="0,00" maxlength="12">
      </div>
    </div>
    <div class="form-row">
      <div class="col-6">
        <label></label>
        <input type="text"  [(ngModel)] = "campo2" placeholder="0,00" maxlength="12">
      </div>
    </div>

    <div class="form-row">
      <div class="col-6">
        <label></label>
        <input type="text"  [(ngModel)] = "campo3" placeholder="0,00" maxlength="12">
      </div>
    </div>

    <div class="form-row">
      <div class="col-6">
        <label></label>
        <input type="text"  [(ngModel)] = "campo4" placeholder="0,00" maxlength="12">
      </div>
    </div>
1 resposta
por NATHALIA QUEIROZ
| 1861.8k xp | 4434 posts
Alura Scuba Team Suporte Educacional

Oii, Anny! Tudo bem?

Agradeço por aguardar o retorno.

Claro, há algumas opções que podem te ajudar. Como sugestão, tente usar a propriedade text-align no CSS, para alinhar à direita. Segue um exemplo:

.form-row input[type="text"] {
  text-align: right;
}

Outra possibilidade é utilizando o flexbox, com ele é possível envolver o rótulo e o campo de entrada em um elemento de contêiner e definir a propriedade display do contêiner como flex. Em seguida, defina a justify-content como flex-end. Isso alinhará à direita o campo de entrada dentro do elemento de contêiner. Segue um exemplo:

.form-row {
  display: flex;
  justify-content: flex-end;
}

Lembre-se que os exemplos precisam ser editados conforme o seu projeto e testados.

E deixo aqui os links das documentações de ambas propriedades para te auxiliar nos estudos e na aplicação:

Ambas páginas podem abrir no inglês, caso não tenha familiaridade com o idioma, clique com o botão direito do mouse em qualquer canto da página e escolha a opção Traduzir para o português.

Espero ter ajudado. Qualquer dúvida, não hesite em recorrer ao fórum.

Bons estudos, Anny!