gpt4 book ai didi

html - 导航栏内的透明间隙

转载 作者:行者123 更新时间:2023-11-28 13:19:43 27 4
gpt4 key购买 nike

我试图让它在导航栏上有一个间隙(但没有将颜色设置为与背景相同),当前选择的选项卡是...

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

最佳答案

您需要添加一个空元素才能使其生效。确保你的 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>

关于html - 导航栏内的透明间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16200612/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com