Vertical distance between LI’s

Asked

Viewed 54 times

1

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

ul.ulVertical li {
	display: inline-block;
	width: 100px;
	height: 30px;
	text-align: center;
	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>
	<li>Passo 6</li>
	<li>Passo 7</li>
	<li>Passo 8</li>
	<li>Passo 9</li>
	<li>Passo 10</li>
	<li>Passo 11</li>
	<li>Passo 12</li>
	<li>Passo 13</li>
</ul>

That code works.

But due to width in horizontal of li be of 100px, this leads to a distance between the li's of a size equal to its horizontal width.

What I need?

Find a way to bring the li's of a form that there is no space between them when they are in vertical.

css css3

  • It’s not very clear what you want.

  • Couldn’t remove the width? The problem is that the UL is 800px wide and each LI is 100px, and since it is 13 LI’s, it will exceed the width of the UL.

  • well, this 100px da li is so that the li’s have the high compatible with the UL. Otherwise, the LI will become small inside the UL. Some recourse to this?

2 answers

2


Follow an option, but you will need to put the text that is inside the <li> in a <span>.

This way you rotate the text inside the LI and not the LI in itself. This will give you more control of things.

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

ul.ulVertical li {
  width: 20px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  border-left: 1px rgb(0, 0, 0) solid;
  flex-grow: 1;
}
ul.ulVertical li span {
  display: inline-block;
  position: absolute;
  width: max-content;
  transform: rotate(270deg);
}
  
<ul class="ulVertical">
  <li><span>Passo 1</span></li>
  <li><span>Passo 2</span></li>
  <li><span>Passo 3</span></li>
  <li><span>Passo 4</span></li>
  <li><span>Passo 5</span></li>
  <li><span>Passo 6</span></li>
  <li><span>Passo 7</span></li>
  <li><span>Passo 8</span></li>
  <li><span>Passo 9</span></li>
  <li><span>Passo 10</span></li>
  <li><span>Passo 11</span></li>
  <li><span>Passo 12</span></li>
  <li><span>Passo 13</span></li>
</ul>

  • Yeah, but I also need to add these li’s to each other in such a way that the separation is just the edge. That edge also needs to be all the height of li and one last remark is that li’s need to take all the width of UL

  • @Carlosrocha made an issue in the reply, performs and look there if it was more in agreement

  • Hi, that’s exactly it. But I have a certain affinity for display: in li-ne block and not flex. Would it be asking too much for a solution that does not involve Justify-content: center; align-items: center; float: left; flex-Grow: 1;? If it doesn’t, I’ll understand. But anyway, for your effort I’ll accept the answer!

  • @Carlosrocha what happens is that inline-block doesn’t do everything flex does, as the name says flex is flexible, which is something inline-block is not. Flex sort of automatically splits items into equal sizes, with inline-block this is not possible... If your problem in using Flex is just because you don’t have familiarity as it is just you go on Youtube and see some tutorials, in 30 min you will be great in Flex. [] s

  • actually the lis doesn’t even have the same sizes. Each one will house a kind of dice. It would have to set your widths manually on each li

  • I get it, so just go ahead and put it in your hand since each one has a size

  • is more difficult for me is to remove the display; flex

  • @Carlosrocha here’s a video of less than 20 min for you to learn Flexbox in Portuguese https://www.youtube.com/watch?v=dbVQqcV9iEc

Show 3 more comments

0

Convert the ul in flexbox and use flex-basis: 100px; (where the value 100px is a value that will accommodate the li's within the ul, for the flex-basis allows reduction if the sum of all widths li's surpass the ul).

It is also necessary that the li's own position: relative to the left: -50px; work. Also remove the padding from the ul to get better distributed:

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

ul.ulVertical li {
   position: relative;
	display: inline-block;
	/* width: 100px; */
	height: 30px;
	text-align: center;
	border-top: .1px rgb(0, 0, 0) solid;
	transform: rotate(270deg);
   flex-basis: 100px;
	transform-origin: top right;
   left: -50px;
}

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>
	<li>Passo 6</li>
	<li>Passo 7</li>
	<li>Passo 8</li>
	<li>Passo 9</li>
	<li>Passo 10</li>
	<li>Passo 11</li>
	<li>Passo 12</li>
	<li>Passo 13</li>
</ul>

  • Note that there is a gap between the margin of Step 1 and the edge of the UL. This must be happening because the li’s are not occupying the entire space of the UL. Another problem there is the size of the edge and also of the li that should get you the height to UL

Browser other questions tagged css css3

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