我试图在我的导航栏中均匀分布指向我网站的链接。我在使用最后一个链接时遇到问题，因为它是一个下拉列表，与我的其他链接分开。通过在我的 CSS 样式表中将 width: 25% 添加到 .navbar a，我能够在导航栏中均匀地分隔我的非下 zipper 接。我尝试将 width: 25% 添加到 .dropdown 但没有成功。我也尝试将它添加到 .dropdown .dropbtn 但那也没有做。
这是我的 HTML 布局示例:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #272424;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font: Arial;
font-size: 20px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 25%;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
width: 100%;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #81A3A7;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Name</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar">
<nav>
<a href=index.html>About</a>
<a href=projects.html>Projects</a>
<a href=publications.html>Publications</a>
<div class="dropdown">
<button class="dropbtn">Writing
</button>
<div class="dropdown-content">
<a href="why_writing.html">Why Write?</a>
<a href="dollops.html">Dollops</a>
<a href="longforms.html">Longforms</a>
<a href="technical_science.html">Technical/Science</a>
<a href="quotes.html">Quotes</a>
<a href="words.html">Words</a>
<a href="notes.html">Notes</a>
</div>
</div>
</nav>
</div>
<header>
<h1>Why Write?</h1>
</header>
<p>Coming soon!</p>
</body>
</html>
这是显示问题的图片:
这就是我想要的:
这是不对的:
最佳答案
欢迎! 只需在 div.dropdown 中添加 width:25%
并且您的下拉菜单采用与其他链接相同的宽度。
关于html - 我试图在导航栏中均匀分布链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57269587/