Question

我正在努力使它在导航栏上有一个间隙（但没有将颜色设置为与背景相同），当前所选标签位于......

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

Answer 1

您需要添加一个空元素才能生效。确保导航元素的所有祖先都没有背景，而不是要显示在标签中的背景。

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>

导航栏内的透明间隙

1 个答案: