时间戳

首页 > 解决方案 > 我的导航栏中的下拉按钮高于其他项目

javascript - 我的导航栏中的下拉按钮高于其他项目

问题描述

习惯了使用 UI Frameworks 的导航栏，这次我想创建一个不依赖任何框架的导航栏，这就是为什么我按照互联网上的教程，不幸的是当我试图减小链接的字体大小时，出现了这个问题. 我的包含“个人资料”的下拉按钮高于我的其他链接，我希望它与其他链接保持一致。

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap');

html,body {
    height:100%;
    width:100%;
    font-family:'Nunito',sans-serif;
}

.nav {
     background-color: #fff;
     overflow: hidden;
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 12px;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.05);
}
 .nav .dropdown .dropbtn {
     font-size: 12px;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
 
<div class="nav" id="topnav">
        <a href="/" class="active">For You</a>
        <a href="/">Discover</a>
        <a href="/">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</button>
            <div class="dropdown-content">
                <a href="/">My profile</a>
                <a href="/">My projects</a>
                <a href="/">Settings</a>
                <a href="/">Help</a>
            </div>
        </div>
        <a href="/">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    </div>

看？“个人资料”高于其他链接

标签： javascripthtmlcsssemantic-ui

解决方案

麻烦的是，您的按钮的字体系列没有被设置，它将继承按钮的原生前端系列。

在这里，我只是将它添加到您的样式中以分配它，但是您可以通过创建“链接”类以更优雅的方式进行分配...

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap');

html,body, .dropbtn {
    height:100%;
    width:100%;
    font-family:'Nunito',sans-serif;
}

.nav {
     background-color: #fff;
     overflow: hidden;
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 12px;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.05);
}
 .nav .dropdown .dropbtn {
     font-size: 12px;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
 
<div class="nav" id="topnav">
        <a href="/" class="active">For You</a>
        <a href="/">Discover</a>
        <a href="/">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</button>
            <div class="dropdown-content">
                <a href="/">My profile</a>
                <a href="/">My projects</a>
                <a href="/">Settings</a>
                <a href="/">Help</a>
            </div>
        </div>
        <a href="/">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    </div>

推荐阅读