Jump to content
Carcleo

Dificuldades com FlexBox e UL

Recommended Posts

Pessoal, estou com uma dúvida que está me tirando o sono!

 

Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).

 

Nessa versão, com DIV's, tudo funciona bem:


CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    div.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    div.cabecalhoVertical div {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    div.cabecalhoVertical div span {
        text-align: center;
        font-weight: bolder;
    }

HTML:

<div class='cabecalhoVertical'>
    <div style='width:215px;'><span class='comum'   >Nome do Gcéu </span></div>
    <div style='width:215px;'><span class='vertical'>Supervisor</span></div>
    <div style='width:215px;'><span class='comum'   >Líder</span></div>
    <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div>
    <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div>
    <div style='width:035px;'><span class='vertical'>Visitantes</span></div>
    <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
    <div style='width:035px;'><span class='vertical'>Total de presentes</span></div>
    <div style='width:035px;'><span class='vertical'>Ofertas</span></div>                    
    <div style='width:035px;'><span class='vertical'>Disicpulados</span></div>                    
    <div style='width:035px;'><span class='vertical'>Número de decisões</span></div>            
</div>    

Resultado:

a.thumb.jpg.554479fd09a212a9035997cbf50e3bb6.jpg

 

Agora com UL -> A falha:

 

CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    ul.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    ul.cabecalhoVertical li {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    ul.cabecalhoVertical li span {
        text-align: center;
        font-weight: bolder;
    }


HTML:

<ul class='cabecalhoVertical'>
    <li style='width:215px;'><span class='comum'   >Nome do Gcéu </span></li>
    <li style='width:215px;'><span class='vertical'>Supervisor</span></li>
    <li style='width:215px;'><span class='comum'   >Líder</span></li>
    <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li>
    <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li>
    <li style='width:035px;'><span class='vertical'>Visitantes</span></li>
    <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li>
    <li style='width:035px;'><span class='vertical'>Total de presentes</span></li>
    <li style='width:035px;'><span class='vertical'>Ofertas</span></li>                    
    <li style='width:035px;'><span class='vertical'>Disicpulados</span></li>                    
    <li style='width:035px;'><span class='vertical'>Número de decisões</span></li>            
</ul>    

Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI

b.png

 

Gostaria de saber 2 coisas:

 

1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?

2) Como corrigir essa falha?

 

Obrigado a quem puder ajudar.

Share this post


Link to post
Share on other sites

Fala irmão, beleza?

 

1) Isso acontece porque as UL por padrão vem com essas propriedade aqui.  

 

    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;

Perceba a última propriedade: padding-inline-start: 40px;

É justamente ela que está dando esse espaçozinho dos inferno rsrs...

1.1) obs: Se quiser, crie uma ul qualquer e inspecione ela que você verá essas props padrões delas.

 

2) Para resolver isso diretamente, você pode tirar o padding dessa ul: 

ul.cabecalhoVertical{
  padding: 0;
  display: flex;
  height: 200px;
  border: .1px rgb(0,0,0) solid;        
}

Ou posso te passar uma prática minha, que eu gosto de fazer, que é resetar todos os paddings e margins de todos os elementos, e só adiciono padding e margin quando eu necessito,

Então fazendo o reset = 

* {
  margin: 0;
  padding: 0;
}

2.1) O * faz referências a todos os elementos do seu HTML, assim aplica o estilo que esta la dentro para todos os elementos.

 

Valeu irmão, abraços! Bons estudos

Share this post


Link to post
Share on other sites

Cara, muiito top. Ops,  muito jóia.

 

Obrigado!

 

Essa prética, eu tamém uso. Mas estava fazendo esse texte em um arquivb seprsdo e nele e não coloquei o resset

* {
  margin: 0;
  padding: 0;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By joao b silva
      amigos é o seguinte, eu crio um grid dinamicamente com bootstrap, porem a depender do conteúdo as colunas, na mesma linha ficam com tamanhos (height) diferentes, o que não acontece quando utilizamos <table></table>. Como posso resolver isso?
    • By Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

    • By alexmill466
      estou criando um site onde tem 3 tipos de produtos novidades, sucessos e vips gostaria que aparece-se cada item de cada classe aparecer no seu devido setor sei que preciso colocar id de cadastro mas como faria a referencia? alguém pode me ajudar sou iniciante. 
    • By b2black
      Estou tentando alinhar um menu dentro do header, e dentro do header tem 2 div, qual a ordem de respeito das funções?
       
      <header> <div class="menuwrap"> <div class="menu"> <nav> <ul> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> <li><a href="">Produto</a></li> </ul> </nav> </div> </div> </header>  
      body {margin: 0; padding: 0;} header { display: flex; flex-wrap: wrap; justify-content: space-between; height: 5vh; background: red; } .menuwrap {} .menu {} .menu ul {} .menu li{display: inline-block;}  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.