2016-10-27 8 views
1

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

しかし、私はそれらが選択されているかどうかに応じて異なる<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/

答えて

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

プレビュー

enter image description here

フィドル:https://jsfiddle.net/6L0fhacb/

+1

パーフェクト、ありがとう! 'height'と' vertical-align:bottom'を組み合わせる理由は何ですか? – Cleared

+0

@Clearedわからない...しかし、技術的には、高さを調整するには 'line-height'が必要です。それを試して、それが「高さ」の問題を解決するかどうか教えてください。 –