html - 导航栏内的透明间隙

Question

我正在尝试使其在当前选定选项卡所在的导航栏上有一个间隙（但没有将颜色设置为与背景相同）...

为了更详细地解释，我需要将“我的页面”选项卡（当前选定的选项卡）设置为透明选项卡，但是它需要显示背景颜色而不是其后面的导航栏颜色。

Answer 1

您需要添加一个空元素才能使其正常工作。确保您的 nav 元素的所有祖先都没有背景，而不是您想要显示到选项卡的背景。

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>