Question

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

我的问题是如何将宽度设置为父母的100% 父母。除了 % 或 em 我不想使用任何东西，因为 px 会导致不同屏幕尺寸的问题。并使用特定的 120% 将导致同样的问题。

    .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 添加了填充。如果您删除填充，您将看到 navbarDropBtn 与 navbarMain 一样宽也许你应该像这样给它填充：

 .navbarMain {
     padding: 14px 0;
 }

这样它的左右两边就没有填充，因此将和 navbarDropBtn 一样宽

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

1 个答案: