2
respostas

[Bug] Problemas com hr

Olá, pessoal, queria ajuda num projeto mobile first, onde eu estou tendo problemas com meu hr no css. O comportamento não é o esperado, pois ele fica no meio ao invés de encostar na section por inteiro. Alguém consegue me ajudar?

<section class="consultas-dia">
        <div class="consultas-dia__paciente">
            <img src="./images/perfil-1.svg" alt="Paciente Luciana Dias" class="consultas-dia__perfil-paciente">
            <div class="consultas-dia__infos-pacientes">
                <p class="consultas-dia__nome-pacientes">Luciana Dias</p>     
                <div class="consulta-dia__consulta">
                    <img src="./images/Camera.svg" alt="Câmera" class="consulta-dia__camera">
                    <p class="consultas-dia__infos-consulta">Consulta remota</p>
                </div>              
            </div>
            <div class="consulta-dia__chat">
                <a href="#"><img src="./images/Chatcirculo1.svg" alt="chat para conversar com paciente"></a>
            </div>
        </div>
            
            <hr class="linha-horizontal">
            <p class="consultas-dia__horario">14:00 - 15:00 (1 hora)</p>
            <div class="consultas-dia__opcoes">
                <a href="#" class="consultas-dia__ligar-video">Ligar por vídeo</a>
                <a href="#" class="consultas-dia__ligar-audio">Ligar por áudio</a>
            </div>
    </section>
.consultas-dia {
    margin: 0 1em 1em 1em;
    border: 1px solid var(--branco);
    border-radius: 8px;
    background-color: var(--branco);
    padding: 1.5em;
}

.consultas-dia__paciente {
    display: flex;
    align-items: center;
}

.consultas-dia__perfil-paciente {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.consultas-dia__infos-pacientes {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    width: 80%;
}

.consultas-dia__nome-pacientes {
    font-weight: 700;
    font-size: 14px;
    color: var(--preto-titulo);
    padding-top: 1em;
}

.consulta-dia__consulta {
    display: flex;
    gap: 0.5em;
}

.consulta-dia__camera {
    width: 16px;
}

.consultas-dia__infos-consulta {
    font-size: 12px;
    color: var(--cinza-subtitulo);
}

.consulta-dia__chat-img {
    width: 32px;
}

.linha-horizontal {
    border: none;
    border-top: 1.5px solid var(--preto-titulo);
    margin: 1em 0;
    opacity: 10%;
}

.consultas-dia__horario {
    font-weight: 500;
    font-size: 12px;
    color: var(--preto-titulo);
    padding-bottom: 0.8em;
    padding-left: 1em;
}

.consultas-dia__opcoes {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.consultas-dia__ligar-video {
    border: 1px solid var(--laranja);
    border-radius: 8px;
    background-color: var(--laranja);
    text-align: center;
    text-decoration: none;
    color: var(--branco);
    font-weight: 500;
    font-size: 14px;
    padding: 0.85em 1em;
}

.consultas-dia__ligar-audio {
    border: 1px solid var(--cinza-gelo);
    border-radius: 8px;
    background-color: var(--branco);
    text-align: center;
    text-decoration: none;
    color: var(--preto-titulo);
    font-weight: 500;
    font-size: 14px;
    padding: 0.85em 1em;
}
2 respostas

Oii, Fabio! Como vai?

O problema de posição pode estar ocorrendo devido à definição atribuída ao magin que é 1em 0, que cria espaço em ambos os lados do hr.

Sendo assim, tente ajustar o margin, no seu arquivo CSS, de forma que ele se estenda de acordo com a largura da section. Sugestão para o teste ajuste: margin : 1em 0 0 0, para manter o espaço acima e abaixo do hr.

Além disso, se for necessário, você pode ajustar o padding da sua section para que o hr fique melhor adaptado na página.

Espero ter ajudado. Qualquer dúvida, conte conosco.

Bons estudos, Fabio!

Eu estava tendo impedimento de uma width, então o que me solucionou foi colocar na margem mesmo, entretanto assim margin: 1em -1.5em; quando aplicava 0, nao funcionava.