如何调整CSS让导航栏中id为current的链接与其余导航项同行显示

问题原因 #

• 包裹Home的<div>是块级元素，默认独占一行，所以Home单独显示
• 你的HTML结构不规范：<p>标签内部不能嵌套块级的<div>，浏览器解析时会自动拆分标签，进一步破坏布局
• 你给#current设置了200px的固定宽度，会撑开元素加剧换行问题

修复方案 #

以下是调整后的完整代码，改动幅度小，适配你原来的需求：

修改后HTML代码

<nav class="navigation">
  <a id="current" href="index.html">Home</a>
  <a href="placeholder.html">Visit Us</a>
  <a href="placeholder.html">Shop</a>
  <a href="placeholder.html">Our History</a>
</nav>

修改后CSS代码

.navigation {
  background-color: #333333;
  width: 1024px;
  color: #fefefe;
  font-size: 120%;
  /* 新增flex布局，强制子元素横向排列 */
  display: flex;
  /* 导航项之间的间距，可自行调整数值 */
  gap: 36px;
  /* 导航项垂直居中对齐 */
  align-items: center;
  /* 导航内边距，避免内容贴边 */
  padding: 10px 20px;
}

#current {
  /* 边框样式缩写，和你原来的效果一致 */
  border-bottom: 3px solid #ff0000;
  /* 去掉固定宽度，适配内容长度 */
  width: auto;
  color: #fefefe;
  text-decoration: none;
}

/* 统一所有导航链接的基础样式 */
.navigation a {
  color: #fefefe;
  text-decoration: none;
  /* 给上下内边距，让底部红色边框和文字距离更合理 */
  padding: 8px 0;
}

改动说明 #

1. 移除了不合理的<p>、<div>嵌套结构，直接把导航链接作为导航容器的子元素，符合HTML语法规范
2. 用Flex布局实现横向排列，是目前前端做导航的主流方案，后续调整间距、对齐方式都很方便
3. 移除了#current的固定宽度，避免元素被撑宽，同时补充了导航链接的统一样式，显示效果更协调

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