0

boa tarde pessoas, desculpa incomodá-las, mas preciso de ajuda para fazer um alinhamento que não estou conseguindo. Estou formatando um elemento que parecido com uma tabela, tem os dias da semana a esquerda e os horários a direita. Porém não estou conseguindo alinhar os horários de forma correta. Acrescentei parte do código html e css que estou com problemas. E vou colocar as imagens da expectiva e da realidade. Peço desculpas pelos possíveis erros que irão encontrar nesses códigos, mas estou me esforçando ao MÁXIMO para aprender e melhorar. Obrigada desde já.

Como quero que fique:

Quero que fique parecido com isso:

Como está na realidade:

Porém está assim:

Código CSS

.banner3{
    background-color: #2b4c99;
    flex: 1;
}
.banner_title{
    font-size: 21px;
}

Código HTML

<div class="banner3">
                        <div class="banner_title">
                            Opening Hours
                        </div>

                        <div>
                            Monday - Friday  <span>08:00am - 05:00pm</span>
                        </div>

                        <div>
                            Saturday <span>08:00am - 05:00pm</span>
                        </div>

                        <div>
                            Sunday   <span>08:00am - 05:00pm</span>
                        </div>
</div>

1 Resposta 1

1

Use flex mesmo, só que nas divs com os horários, e para colocar cada texto de um lado use a propriedade justify-content: space-between; Recomendo que faça um curso de Flex, no Youtube mesmo vc encontra de monte e de graça! ;)

.banner3{
    background-color: #2b4c99;
    flex: 1;
}
.banner_title{
    font-size: 21px;
}

.banner3 .card{
    display:flex;
    justify-content: space-between;
}
<div class="banner3">
                        <div class="banner_title">
                            Opening Hours
                        </div>
                        
                     
                        <div class="card">
                            Monday - Friday  <span>08:00am - 05:00pm</span>
                        </div>

                        <div class="card">
                            Saturday <span>08:00am - 05:00pm</span>
                        </div>

                        <div class="card">
                            Sunday   <span>08:00am - 05:00pm</span>
                        </div>
                    
</div>

2
  • 1
    Nossa muito obrigada mesmo, consegui resolver o problema. Tenho dificuldades mesmo com flex e posicionamentos no css, significa que preciso estudar e praticar mais. Obrigada. 29/05/2020 às 0:41
  • 2
    @JacquelineSantos fico feliz em ter te ajudado! Como te falei procura no Youtube, tem muita coisa lá sobre CSS e FlexBox ;)
    – hugocsl
    29/05/2020 às 11:29

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 .