如何加宽导航栏链接间距 实现指定导航项左右对齐布局

针对你的两个需求（加宽导航链接间距、实现指定排布），直接用Flex弹性布局实现比原有float浮动方案更简单好维护，以下是可直接运行的修正代码和说明：

首先修正原代码的基础问题 #

原代码存在两个会影响布局的小问题，需要先处理：

• 删掉导航<ul>内部嵌套的多余空<ul>标签，避免布局错乱
• 修正.header样式里首字母大写的Color属性为标准小写color

完整实现代码 #

样式代码（CSS） #

body {
  margin: 0;
}

.header {
  color: #FFFFFF;
  background-color: #000000;
  padding: 50px;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
  /* 开启Flex弹性布局，替代原有的float浮动方案 */
  display: flex;
  align-items: center;
}

li a {
  display: block;
  color: white;
  text-decoration: none;
  /* 调整此处左右padding值即可加宽链接间距，数值越大间距越宽 */
  padding: 14px 28px;
}

/* 给靠右组的第一个导航项加这个类，自动把后续项推到右侧 */
.push-right {
  margin-left: auto;
}

li a:hover {
  background-color: #111;
}

结构代码（HTML） #

<div class="header">
  <h1>Sphinx Productions</h1>
</div>

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Portfolio</a></li>
  <li class="push-right"><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

实现说明 #

• 间距调整：如果需要更宽/更窄的链接间距，直接修改li a样式里padding的第二个数值（左右内边距）即可，比如改成14px 40px时间距会比默认宽很多，也可以给li加margin: 0 10px这类属性额外加外间距。
• 排布逻辑：Flex布局下给元素加margin-left: auto会自动占满该元素左侧的所有剩余空白，因此Home、Portfolio会自然靠左排列，Contact、About会被整体推到导航栏右侧，完全符合你要的排布效果。
• 原有float: left的写法已经全部移除，不需要额外处理浮动清除问题，后续要加响应式适配也更方便。

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