UL의 밑에 위치 LI 성분

Question

나는 css와 html를 사용하여 탭 같이 항법 메뉴를 조롱하는 것을 시도하고있다. 이것을 위해 나는 요소를 <li> 요소와 함께 사용하고 있는데 여기에는 원하는 효과가있는 display: inline-block이 설정되어 있습니다.

다른 요소의 높이가 서로 다릅니다. 요소가 선택되어 있는지 여부에 따라 달라 지므로 요소 부모의 맨 아래에서 시작하기를 원합니다. <ul> -element.

아무런 성공없이 bottom: 0px;과 margin-bottom: 0px;으로 시도했습니다.

"margin-top = [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/