How to Leave Element LI 100%

Asked

Viewed 235 times

3

inserir a descrição da imagem aqui

The photo above represents a slider I’m doing on a page.

Each slider has an image in the middle representing the white sphere.

I want all the sliders that are formed by a li are the same size, the same size as the largest, i.e., the orange slider.

Regardless of color, it was just an example, I want them to be the same size.

The black line represents the end of the li orange. I want everyone else to go to the end.

I tried to...

ul{
    height: 100%;
}

li{
    height: 100%;
}

...but it didn’t work out.

The li(s) has no fixed size. They just stay with the height of the object that is in the middle, sometimes the object is larger than the other and ends up giving this difference.

html css

2 answers

2


height: 100% needs a reference to be calculated. Consider the example:

 .x {
   height: 100%;
   background: red
 }
<body>
  <div class='x'>StackOverflow</div>
</body>

Does it work? Yes, it does.

Maybe it doesn’t work "visually" speaking, after all it was expected that .x occupied 100% of the height of the body. But if you consider the above snippet, what size is the body? A simple question: How an element will occupy 100% height of another element that does not have height?

Taking the same snippet above and assigning a value to the height of body, that is the result:

body {
  height: 300px /* exemplo */
}
.x {
  height: 100%;
  background: red
}
<body>
  <div class='x'>StackOverflow</div>
</body>

Maybe between the code problem you posted, it wasn’t clear where that ul and the li are being placed and if the parent elements have size. But it is enough that you establish a reference for them to calculate 100% height.

.referencia {
  height: 200px /* a referência tem 200px de altura */
}

ul {
  height: 100%;
  list-style: none
}

li {
  display: inline-block;
  width: 100px;
  height: 100%
}

li:nth-child(1){ background: #A50D18 }
li:nth-child(2){ background: #636363 }
li:nth-child(3){ background: #003662 }
li:nth-child(4){ background: #F26522 }
<div class='referencia'>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

0

I got.

I put in the ul the property:

display: table.

Why the li was already display: inline-block.

Browser other questions tagged html css

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