Cleared Cleared - 3 months ago 24
CSS Question

Position LI-element at the bottom of UL

I am trying to craete a tab-like navigation menu using css and html. For this i am using an

<ul>
-element with
<li>
elements inside where i have set
display: inline-block
which has the desired effect.

However i want to have different height of the different
<li>
-elements, depending of wether they are selected or not and therefor i want them to start at the bottom of the parent
<ul>
-element.

I have tried with
bottom: 0px;
and
margin-bottom: 0px;
without any success.

I have been able to "force" them to the bottom by setting "margin-top = [height of ul-parent] - [height of li] but i would like to "attatch" them to the bottom instead of setting an offset to the top. How can i achieve this?



.tab {
height: 40px;
background-color: blue;
}
li {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
height: 20px;
background-color: red;
}
li.selected {
height: 30px;
}

<ul class="tab" id="left_menu">
<li>Option A</li>
<li class="selected">Option B</li>
<li>Option C</li>
<li>Option D</li>
</ul>





Fiddle: https://jsfiddle.net/dawmuzea/

Answer

You need to give vertical-align: bottom and remove the height:

.tab {
  background-color: blue;
}

li {
  display: inline-block;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  height: 20px;
  background-color: red;
  vertical-align: bottom;
}

li.selected {
  height: 30px;
}

Preview

enter image description here

Fiddle: https://jsfiddle.net/6L0fhacb/