如何实现NAME文本与导航列表的左右并排布局？

Hey there! Let's sort out this header layout issue you're dealing with. First off, I spotted a tiny typo in your code: your CSS uses .mainmaneheader but your HTML has mainnameheader—that's one quick fix to get out of the way first. Now, let's get the two elements sitting side-by-side, left and right.

Method 1: Using Flexbox (Recommended) #

Flexbox is the simplest, most modern way to handle this kind of layout. Here's how to adjust your code:

Updated CSS #

body { font-family: nunito; }
/* Fixed the class name typo + removed default h1 margin for cleaner alignment */
.mainnameheader { 
  margin: 0;
}
header {
  display: flex;
  justify-content: space-between; /* Pushes elements to opposite ends */
  align-items: center; /* Vertically centers both elements */
  padding: 0 1rem; /* Adds some breathing room on the sides */
}
ul { 
  list-style: none; 
  padding: 0; 
  margin: 0;
  display: flex; /* Makes list items sit horizontally */
  gap: 1.5rem; /* Adds space between navigation links */
}
.purplebox { background-color: #ba68c8; }

HTML (no changes needed—just confirming the class name matches) #

<header>
  <h1 class="mainnameheader">NAME</h1>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

Why this works:

• display: flex turns the header into a flex container, making its direct children (the h1 and ul) flex items.
• justify-content: space-between ensures the "NAME" stays left and the navigation stays right, with automatic space between them.
• align-items: center keeps both elements vertically aligned, so the text doesn't sit higher/lower than the links.
• display: flex on the ul makes list items line up next to each other instead of stacking.

Method 2: Using Float (For Older Browser Compatibility) #

If you need to support older browsers that don't play nice with Flexbox, floats are a reliable fallback:

CSS #

body { font-family: nunito; }
.mainnameheader { 
  float: left;
  margin: 0;
}
header {
  overflow: hidden; /* Prevents the header from collapsing around floated elements */
  padding: 0 1rem;
}
ul { 
  list-style: none; 
  padding: 0; 
  margin: 0;
  float: right;
}
ul li {
  display: inline-block; /* Makes list items horizontal */
  margin-left: 1.5rem;
}
.purplebox { background-color: #ba68c8; }

Key note: The overflow: hidden on the header is critical—it wraps the floated elements so the header maintains its height and layout.

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