HTML/CSS导航栏故障求助：无法全屏及文字未居中问题

Hey there! Let's fix those navbar issues you're facing—they're totally common when starting out with CSS floats, so let's break it down step by step.

Problem 1: Navbar won't stretch across the full screen #

The issue here is that using float: left on your list items means the parent <ul> won't automatically expand to fill the screen width. Plus, fixed width: 200px on each <li> might not add up to your screen size. A cleaner modern solution is to use Flexbox instead of floats—it makes distributing space across items way easier.

Problem 2: Text not centered in the "bubbles" #

Your text-align: center was being overridden by the padding-right: 60px on the <a> tag, which pushed the text off-center. Also, the <a> wasn't filling the entire <li> space, so even if you centered it, it wouldn't look right.

Here's your revised CSS with fixes: #

body {
  line-height: 1.6em;
  margin: 0;
  background-color: #fefefe;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
}
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}
@font-face {
  font-family: "Saturday Sans ICG Bold";
  src: url("Fonts/Saturday Sans ICG Bold.tff");
  src: url("Fonts/saturday_sans_icg_bold-webfont.woff");
}
#main-header {
  color: #000;
  margin-top: 20px;
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}
#navbar a {
  color: #A9A9A9;
  text-decoration: none;
  padding: 0; /* Removed the padding-right that was pushing text */
  display: block;
  width: 100%; /* Make link fill the entire list item */
  height: 100%;
  text-align: center; /* Ensure text is centered */
}
#navbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex; /* Switch to flex layout */
  width: 100%; /* Make ul fill the full screen width */
}
#navbar ul li {
  /* Removed float: left */
  flex: 1; /* Each item takes equal space to fill the screen */
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: aliceblue;
  border-top: 2px #f4f4f4 solid;
  border-bottom: 2px #f4f4f4 solid;
  border-radius: 15px;
  margin: 0 1px; /* Adjust spacing between items */
  position: relative; /* Required for dropdown positioning */
}
#navbar ul li ul {
  position: absolute; /* Dropdown won't break the flex layout */
  top: 100%; /* Position dropdown directly below the parent item */
  left: 0;
  width: 100%; /* Dropdown matches parent item width */
  display: block; /* Revert to block for dropdown list */
}
#navbar ul li ul li {
  display: none;
  flex: none; /* Disable flex for dropdown items */
  width: 100%; /* Dropdown items fill their container */
  margin: 1px 0; /* Vertical spacing for dropdown items */
}
#navbar ul li:hover ul li {
  display: block;
}
#navbar ul li ul li:hover {
  opacity: .3;
}
/* Hover Picture */
#navbar li.home-icon:hover {
  background-image: url("Images/home_icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navbar li.home-icon > a:hover {
  opacity: 0;
}
#navbar li.rout-icon:hover {
  background-image: url("Images/dumbbell.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navbar li.rout-icon > a:hover {
  opacity: 0;
}
#navbar li.nutr-icon:hover {
  background-image: url("Images/fruit.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navbar li.nutr-icon > a:hover {
  opacity: 0;
}
#navbar li.abou-icon:hover {
  background-image: url("Images/about_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navbar li.abou-icon > a:hover {
  opacity: 0;
}
#navbar li.cont-icon:hover {
  background-image: url("Images/contact_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navbar li.cont-icon > a:hover {
  opacity: 0;
}
#main-footer {
  text-align: center;
  font-family: 'Saturday Sans ICG Bold', Arial, sans-serif;
  font-size: 10px;
  padding: 20px;
  margin-top: 250px;
}

Key changes explained: #

1. Flexbox for full-width navbar: By setting display: flex on the <ul> and flex:1 on each <li>, the navbar automatically stretches across the screen, with each item taking equal space. No more fixed widths or float issues!
2. Centered text: Removed the padding-right:60px from links and made <a> tags fill the entire <li> (width/height 100%). This ensures text-align:center works as expected, and the hover area covers the whole bubble too.
3. Fixed dropdown layout: Added position:relative to parent <li> and position:absolute to the dropdown <ul> so the dropdown doesn't disrupt the flex layout of the main navbar.

Give this a try—your navbar should now fill the screen, and text will be perfectly centered in each bubble. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者Wolk