CSS Não estou conseguindo alinhar uma caixa usando CSS, como eu faço?

heinzi19 · 3 de maio de 2022

Pessoal, como eu poderia alinhar essas caixas pra ficaram todas na mesma posição da maior? No caso "nome completo"

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="icon/sigaa.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <title>Cadastro | Docente</title>
</head>
<body>
    <main>
        <div class="principal">
            <div class="cabecalho_ufrrj">
                <p>UFRRJ - Universidade Federal Rural do Rio de Janeiro</p>
            </div>

            <div class="microespacocabecalho"></div>

            <div class="cabecalho">
                <p>Cadastro > Docente</p>
            </div>
            <br>
            <form style="background-color:#F9FBFD;">
                <fieldset>
                    <legend style="text-align: center;"><strong>Dados cadastrais</strong></legend>
                    <br>
                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="matricula">Matrícula:</label>
                            <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" id="matricula" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>
                
                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            Situação:
                            <select name="Selecione">
                                <option value="Sim">Ativo</option>
                                <option value="Não">Aposentado</option>
                            </select>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="normal">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="nome">Nome completo:</label>
                            <input type="text" name="nome" id="nome" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="cpf">CPF:</label>
                            <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" id="cpf" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="data">Data de nascimento: </label>
                            <input type="date" name="data" id="data" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="login">Login:</label>
                            <input type="text" name="login" id="login" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>
                
                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="senha">Senha:</label>
                            <input type="password" name="senha" id="senha" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="normal">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="email">E-mail:</label>
                            <input type="text" name="email" id="email" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>

                    <div class="inputbox">
                        <img src="imagens/estrela.png" alt="Campo obrigatório">
                            <label for="telefone">Telefone:</label>
                            <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" id="telefone" class="input_user" required>
                        </img>
                    </div>
                    <div class="microespaco"></div>
                    
                    <div class="centralizar">
                    <button class="btao-login"><a href="index.html" style="color:black">Cancelar</a></button>
                    <button class="btao-login">Cadastrar</button></div>
                </fieldset>
            </form>
        </div>
    </main>
</body>
</html>

Public2004 · 3 de maio de 2022

Boas. Uma alternativa seria definir um tamanho para os "labels" e outro para os "inputs" (medida relativa ou absoluta, como preferir) e para surtir efeito, definir os itens como "inline-block".

Att.