Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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**:
**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**
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.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;
}@Carcleo
Boa irmão, que bom que resolveu, tmj!!
Fala irmão, beleza?
1) Isso acontece porque as UL por padrão vem com essas propriedade aqui.
ul.cabecalhoVertical{
* {