HTML/CSS导航栏列表无法居中问题求助（附代码）

问题根源 #

1. HTML结构违规：导航栏的<div class="bar">被错误放在了<head>标签中，页面可视内容必须放在<body>内，否则浏览器渲染逻辑会混乱。
2. CSS布局缺失：仅给<li>设置margin: auto无法实现整体居中，需要给列表容器(<ul>)和导航栏容器(.bar)添加对应的布局规则，同时还存在样式属性错误。

修正后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="bar">
    <ul class="words">
      <li class="Keyboards">Keyboards</li>
      <li class="Accessories">Accessories</li>
      <li class="In_Stock">In Stock</li>
      <li class="Group_Buy">Group Buy</li>
      <li class="Support">Support</li>    
    </ul>
  </div>
</body>
</html>

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免内边距/边框影响元素宽度计算 */
}

body {
  background-color: rgb(41, 41, 41);
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: bold; /* 修正：font-style无bold值，需用font-weight设置加粗 */
}

.bar {
  background-color: rgb(69, 69, 69);
  height: 75px;
  display: flex;
  align-items: center; /* 让内部元素垂直居中 */
  justify-content: center; /* 让内部元素水平居中 */
}

.words {
  list-style: none; /* 移除默认列表圆点 */
  display: flex;
  gap: 20px; /* 控制列表项之间的间距，替代li的左右padding */
}

li {  
  font-size: 25px;
}

关键修正说明 #

• 调整HTML结构，将导航栏移至<body>标签内，符合页面渲染规范；
• 用Flex布局给.bar设置垂直+水平居中，确保导航栏内容在75px高度内居中显示；
• 给<ul>设置Flex布局，更灵活地实现列表项横向排列，通过gap统一控制间距；
• 修正font-style: bold的错误，改为font-weight: bold，这是设置文字加粗的正确属性；
• 添加box-sizing: border-box，避免元素因内边距或边框出现宽度溢出问题。

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