调整下拉菜单匹配链接宽度及导航栏无间隙盒子实现

Got it, let's tackle both of your issues step by step. Here's how to adjust your CSS to get the dropdown perfectly matching the "Writing" button width and turn those navbar links into separate, spaced-out boxes instead of a continuous black bar:

Key Changes Explained #

1. Dropdown Width Matching #

The problem with width:100% on .dropdown-content was that it was sizing itself relative to the body (since no parent element had position:relative). By adding position:relative to the .dropdown container, we make the dropdown content's width relative to the button's container (which has your set 25% width). Setting .dropdown-content to width:100% will now perfectly align it with the "Writing" button.

2. Independent Navbar Link Boxes #

• Remove the full dark background from the .navbar wrapper and apply it directly to each individual link and dropdown button.
• Use display:flex on the <nav> element to easily add gaps between the links—this replaces the continuous bar with distinct boxes and makes the layout more responsive than relying on floats.

Modified Full CSS Code #

/* Navbar container */
* {
  box-sizing: border-box;
}

.navbar {
  overflow: hidden;
  font-family: Arial;
  /* Removed full background here—we'll apply it to individual items */
}

.navbar nav {
  display: flex;
  gap: 4px; /* Adjust this value to control spacing between boxes */
}

/* Links inside the navbar */
.navbar a {
  font: Arial;
  font-size: 20px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  width: 25%;
  background-color: #272424; /* Dark background on individual links */
}

/* The dropdown container */
.dropdown {
  width: 25%;
  position: relative; /* Contains the absolute-positioned dropdown content */
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #272424; /* Match link background */
  font-family: inherit;
  margin: 0;
  width: 100%;
}

/* Hover state for nav items */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #81A3A7;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%; /* Now matches dropdown button's width */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.navbar .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: auto;
  background-color: #f9f9f9; /* Reset background for dropdown items */
}

/* Hover state for dropdown links */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

Quick Notes #

• If you prefer to stick with floats instead of flex, you can add margin-right: 4px to .navbar a and .dropdown, then set margin-right: 0 on the last child (but flex is cleaner for this layout).
• Tweak the gap value in .navbar nav to make the spaces between boxes wider or narrower as needed.

内容的提问来源于stack exchange，提问作者An Ignorant Wanderer