Li s leaving UL

Asked

Viewed 89 times

1

HTML and CSS:

ul.ulVertical {
  border: .1px rgb(0, 0, 0) solid;
    list-style: none;
  height: 100px;
}

ul.ulVertical li {
  display: inline-block;
  border-top: .1px rgb(0, 0, 0) solid;
  transform: rotate(270deg);
}

ul.ulVertical li:last-chield {
  border: none;
}
<ul class="ulVertical">
  <li>Passo 1</li>
  <li>Passo 2</li>
  <li>Passo 3</li>
  <li>Passo 4</li>
  <li>Passo 5</li>
</ul>

What’s wrong with it?

The goal is that the li stay inside the ul.

Exit:

inserir a descrição da imagem aqui

css css3

2 answers

4


One of the ways to fix this will be more elegant in my view and using transform-origin. Thus vc defines where the rotational vertex will be, as you want it not to leave the UL, vc defines the vertex in top right

Usually by default the element rotates in the center of itself X/Y, so "half" of it is out when you turn the element.

inserir a descrição da imagem aqui

Already when you define that the rotation will be at the top right it rotates from there to inside the container

inserir a descrição da imagem aqui

Follow the image code above.

ul.ulVertical {
    border: .1px rgb(0, 0, 0) solid;
    list-style: none;
    height: 100px;
}

ul.ulVertical li {
    display: inline-block;
    border-top: .1px rgb(0, 0, 0) solid;
    transform: rotate(270deg);
    transform-origin: top right;
}

ul.ulVertical li:last-chield {
    border: none;
}
  <ul class="ulVertical">
    <li>Passo 1</li>
    <li>Passo 2</li>
    <li>Passo 3</li>
    <li>Passo 4</li>
    <li>Passo 5</li>
</ul>

  • worked but the height (now would be the width? ) needs to be the same as UL. How to do it? I did it with height : 100% and width: 100%. No!

  • @Carlosrocha Vc wants the text to be centered on the container is this?

  • Well, come on. The goal is for every LI to be the height of the UL. That the IL is vertical (as you have already guided in the answer) and that the text is centered both vertically and horizontally within the IL

  • @Carlosrocha in this case you don’t even need the Transform-Origen then to control it. Just in UL you put display: flex;and align-items: center; , your UL will look like this https://prnt.sc/mre6yq, if that’s what I understand you want

  • Note that in the act, the li did not fill the whole UL. You can tell by the edge of the line And another thing I’d like you to use: inline-block instead of Flex. It will look better for me when it comes to making the other mobile screens

  • @Carlosrocha then just put width: 100px; and text-align: center; in the LI it will look like this http://prntscr.com/mrek5m

  • now that it has. But it has the drawback that there is a very large separation between one li and the other, and not only the 30px of height . It looks like he’s using the width of li to set a spacing, how does it solve this?

  • @Carlosrocha you will have to use translateY() next to the Rotate in each item to do what you want https://imgur.com/EGEIqX4 . Otherwise the other option is to start everything from 0 and use another technique to make that alignment, or position:Switch to LI and line up one by one in the hand too.

Show 3 more comments

0

Just one transform-origin: 100%; or transform-origin: right;, which is the same thing. This will make the element rotate with the fixed right side, avoiding extrapolating the area of the ul:

ul.ulVertical {
  border: .1px rgb(0, 0, 0) solid;
    list-style: none;
  height: 100px;
}

ul.ulVertical li {
  display: inline-block;
  border-top: .1px rgb(0, 0, 0) solid;
  transform: rotate(270deg);
  transform-origin: 100%;
}

ul.ulVertical li:last-child {
  border: none;
}
<ul class="ulVertical">
  <li>Passo 1</li>
  <li>Passo 2</li>
  <li>Passo 3</li>
  <li>Passo 4</li>
  <li>Passo 5</li>
</ul>

Now, there is an error in your CSS:

ul.ulVertical li:last-chield /* o correto é last-child */

Browser other questions tagged css css3

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