ULの底にあるLI要素の位置

Question

私は、cssとhtmlを使ってタブのようなナビゲーションメニューを細かくしようとしています。このため私は、<ul>要素を<li>要素内に使用しています。ここでは、希望の効果があるdisplay: inline-blockを設定しています。

しかし、私はそれらが選択されているかどうかに応じて異なる<li>要素の異なる高さを持ちたいと思います。したがって、それらを親の末尾で開始したいと考えています。<ul> -element

私はbottom: 0px;とmargin-bottom: 0px;を試してみましたが、何も成功しませんでした。

「margin-top = [height of ul-parent] - [liの高さ]を設定することで、それらを下に強制的に移動させることができましたが、 。？トップにオフセット設定私はこれを達成するにはどうすればよい

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

フィドル：あなたはvertical-align: bottomを与え、を削除する必要がhttps://jsfiddle.net/dawmuzea/

Answer 1

0：

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