Rotate spans in the LI

Asked

Viewed 58 times

3

I have the code down that works normally.

But it contains a flaw.

If you’ll notice, the first and the third div’s are without class. Does that mean that don’t want rotate your spans.

But, not rotating, these 2 spans come out of li.

What to do to fix it?

span.vertical {
transform: translate(-50%, -50%) rotate(270deg);
}

div.cabecalhoVertical {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 200px;
align-items: center;
border: .1px rgb(0, 0, 0) solid;
}

div.cabecalhoVertical div {
position: relative;
height: 100%;
flex-grow: 1;
border-left: .1px rgb(0, 0, 0) solid;
}

div.cabecalhoVertical div span {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
text-align: center;
}
<div class='cabecalhoVertical'>
	<div style='width:100px;'><span class=''        >Passo 1</span></div>
	<div style='width:100px;'><span class='vertical'>Passo 2</span></div>
	<div style='width:100px;'><span class=''        >Passo 3</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 4</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 5</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 6</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 7</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 8</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 9</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 10</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 11</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 12</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 13</span></div>
</div>
inserir a descrição da imagem aqui

html css css3

1 answer

2


Create a property block for spans that do not have the class .vertical, adjusting to the center of the li. Note that some properties declared in this new block do not need to be repeated in the class block .vertical, 'Cause they’re worth to all spans):

div.cabecalhoVertical div span{
   position: absolute;
   top: 50%;
   text-align: center;
   display: inline-block;
   width: 100%;
   height: 20px;
   margin-top: -10px;
}


span.vertical {
transform: translate(-50%, -50%) rotate(270deg);
}

div.cabecalhoVertical {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 200px;
align-items: center;
border: .1px rgb(0, 0, 0) solid;
}

div.cabecalhoVertical div {
position: relative;
height: 100%;
flex-grow: 1;
border-left: .1px rgb(0, 0, 0) solid;
}

div.cabecalhoVertical div span{
   position: absolute;
   top: 50%;
   text-align: center;
   display: inline-block;
   width: 100%;
   height: 20px;
   margin-top: -10px;
}

div.cabecalhoVertical div span.vertical {
width: 200px;
height: auto;
background: red; /* retire essa linha*/
left: 50%;
top: 55%;
}
<div class='cabecalhoVertical'>
	<div style='width:100px;'><span class=''        >Passo 1</span></div>
	<div style='width:100px;'><span class='vertical'>Passo 2</span></div>
	<div style='width:100px;'><span class=''        >Passo 3</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 4</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 5</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 6</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 7</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 8</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 9</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 10</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 11</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 12</span></div>
	<div style='width:050px;'><span class='vertical'>Passo 13</span></div>
</div>

  • has to increase the space of spans to fit the entire Step 13 in one line? Because it will have more than this

  • Updated answer. See that I put a red background to view the span size, then you delete from the CSS code the background: red

  • Look, I was willing to accept your answer because it was great. But if it’s not too much to ask, is there any way to set an identical example but rather with Divs be with ul? I’ve been trying but with UL it’s like a column on the left side I can’t get out

  • I think it is possible. But I will only be able to see this later because I am doing a maintenance on the machine

  • Oops, no problem. I look forward to it. Learn from someone who knows? It’s priceless.

  • Then the code: https://jsfiddle.net/gk2oL6a7/

Show 1 more comment

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.