设置100%宽度时如何选择父项的父项

Question

我正试图从头开始制作一个非常简单的导航栏，但我在设置某些宽度时遇到了很多问题，我想要.navbarDropBtn和.navbarMain一样宽，但它只有文本，我试着切换它们在html中的显示顺序，但我需要.navbarText在顶部，因为我正在添加平滑的不透明度过渡所以我可以转换梯度。

我的问题是如何将宽度设置为家长的100%父母亲除了%或em，我什么都不想用，因为px会导致不同屏幕大小的问题。并且使用特定的CCD_ 8将导致同样的问题。

.navbarBody {
width:100%;
height: 46px;
position: sticky;
}
.navbarButton, .navbarBody {
background: linear-gradient(0deg, #2a2a2a, #4a4a4a);
z-index: 100;
}
.navbarButton, .navbarMain {
float:right;
text-align:center;
padding: 14px 16px;
color: #fff;
position:relative;
}
.navbarButton:hover, .navbarMain:hover {
cursor: pointer;
color:black;
transition: .25s;
}
.navbarText {
width:100%;
height:100%;
position: relative;
}
.navbarButton:hover .navbarText {
color:black;
}
.navbarMain {
background: linear-gradient(0deg, #296a29, #4aca4a);
}
.navbarDropBtn {
width: 100%;
height: 100%;
background-color: white; /*example only */
}
/*hover effect*/
.navbarButton::before, .navbarMain::before {
content: "";
opacity:0;
background: linear-gradient(0deg, #999, #fff);
top:0px;
left:0px;
position: absolute;
width:100%;
height:100%;
}
.navbarMain::before {
background: linear-gradient(0deg, #3a8a3a, #aafaaa);
}
.navbarButton:hover::before, .navbarMain:hover::before {
opacity:1;
transition:opacity .25s, content .05s;
}


<div class="navbarBody">
<div class="navbarMain" onclick="dropBtn()">
<div class="navbarText">
<div class="navbarDropBtn">
far right special boi
</div>
</div>
</div>
<div class="navbarButton">
<div class="navbarText">
test 1
</div>
</div>
<div class="navbarButton">
<div class="navbarText">
test 1 1
</div>
</div>
</div>

Answer 1

这是因为您在navbarMain中添加了填充。如果你去掉填充，你会看到导航栏DropBtn和导航栏Main一样宽也许你应该这样给它划水：

.navbarMain {
padding: 14px 0;
}

这样一来，它的左右两侧都没有填充，因此宽度将与导航栏DropBtn 一样宽