导航栏文本垂直居中水平居右及响应式适配问题求助

Hey there! Let's fix those navigation bar issues one by one. I've adjusted your CSS to tackle all three problems you mentioned, and I'll break down what changed so you understand the "why" behind each fix.

Modified CSS Code #

body { margin: 0; padding: 0; }

/* ~~ Top Navigation Bar ~~ */
.navigation-bar { 
    background-color: #000000; 
    height: 120px; 
    width: 100%;
    display: flex;
    align-items: center; /* Vertically centers all content inside the bar */
    padding: 0 20px; /* Adds padding to prevent content from touching screen edges */
    box-sizing: border-box; /* Ensures padding doesn't make the bar wider than 100% */
}

#navigation-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Pushes logo left and nav menu right */
}

.navigation-bar ul { 
    padding: 0; 
    margin: 0;
    display: flex; /* Arranges list items in a row */
    flex-wrap: wrap; /* Wraps items to new line when window is too narrow */
    gap: 15px; /* Controls spacing between menu items (cleaner than padding on links) */
    align-items: center; /* Vertically centers text inside each list item */
}

.navigation-bar li { 
    list-style-type: none;
    height: auto; /* Removes fixed height that was causing alignment issues */
    margin: 0; /* Clears unnecessary margin */
}

.navigation-bar li a { 
    color: #808080; 
    font-size: 16px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    padding: 8px 12px; /* Creates a larger clickable area for accessibility */
    opacity: 1;
}

Breakdown of Fixes #

1. Vertical Centering of Navigation Text

   • Replaced manual line-height and margin hacks with Flexbox: Adding display: flex and align-items: center to both .navigation-bar and #navigation-container ensures every element (logo and menu) is perfectly vertically aligned without guesswork.

2. Horizontal Alignment to the Right

   • Used justify-content: space-between on #navigation-container to push the logo to the left edge and the entire menu to the right edge. This is a cleaner alternative to old float or text-align tricks for layout.

3. Preventing Text from Overflowing on Window Resize

   • Added flex-wrap: wrap to the <ul> so menu items automatically wrap to a new line when the window is too narrow to fit them all horizontally.
   • Used box-sizing: border-box on .navigation-bar to ensure the padding we added doesn't make the bar wider than 100% of the screen (which would cause a horizontal scrollbar).

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