투명 격차

Question

나는 틈이 있도록 만들려고 노력 (하지만 배경과 같은 색상을 설정하지 않고) 현재 선택한 탭은 탐색 모음에서하고 ...

좀 더 자세히 설명하기 위해, "My Page"탭 (현재 선택된 탭)을 투명한 탭으로 만들 필요가 있지만 그 뒤에있는 탐색 표시 줄의 색 대신 배경색을 표시해야합니다.

Answer 1

작동하려면 하나의 빈 요소를 추가해야합니다. 탐색 요소의 조상 중 아무 것도 배경에 표시하지 않고 탭에 표시하려는 배경이 없는지 확인합니다.

http://tinker.io/a5458 내가 찾던 정확히 무엇을

body { 
    background: #F58B73; 
} 

.nav-links { 
    display: table; 
    width: 100%; 
    table-layout: fixed; /* could use `white-space: pre` instead */ 
} 

.nav-button { 
    display: table-cell; 
    width: 140px; 
    height: 30px; 
    padding-top: 10px; 
    padding-left: 20px; 
    background: #231F20; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.spacer { 
    background: #231F20; 
    width: 100%; 
    display: table-cell; 
} 

.nav-button-selected { 
    background: transparent; 
} 

     <div class="nav-links pull-right"> 
      <div class="spacer"></div> 
      <a href="#" class="nav-button nav-button-selected">Who I am</a> 
      <a href="#" class="nav-button">What I do</a> 
      <a href="#" class="nav-button">How to contact me</a> 
     </div>