将LI元素定位在UL

Question

我正在尝试使用css和html来创建类似标签的导航菜单。为此，我使用了<ul> - 元素，其中<li>元素位于我设置display: inline-block的位置，具有所需的效果。

但是我希望不同的<li> - 元素具有不同的高度，这取决于它们是否被选中，因此我希望它们从父<ul> - 元素的底部开始。

我尝试使用bottom: 0px;和margin-bottom: 0px;但没有成功。

我能够＆＃34;强迫＆＃34;它们通过设置＆＃34; margin-top = [ul-parent的高度] - [li的高度]到底部，但我想＆＃34; attatch＆＃34;它们到底部而不是设置到顶部的偏移量。我怎样才能做到这一点？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

小提琴：https://jsfiddle.net/dawmuzea/

Answer 1

您需要提供vertical-align: bottom并删除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;
}

预览

小提琴：https://jsfiddle.net/6L0fhacb/