请求指导：如何编写HTML和CSS实现与设计稿一致的导航栏

我正在尝试使用HTML和CSS实现导航栏设计，但最终效果与设计稿不符，文本及背景位置均不正确。推测问题出在HTML元素结构及CSS代码上，恳请指导如何编写代码以实现与设计稿一致的效果。

设计稿 #

当前实现效果 #

当前代码 #

HTML代码 #

<div class="global_navigation_con">
  <div>
    <a href="#"><span>トピックス</span></a>
  </div>
  <div>
    <a href="#"><span>区画情報</span></a>
  </div>
  <div>
    <a href="#"><span>立地企業</span></a>
  </div>
  <div>
    <a href="#"><span>企業支援</span></a>
  </div>
  <div>
    <a href="#"><span>福知山市と</span><span>その周辺</span></a>
  </div>
</div>

CSS代码 #

.global_navigation_con {
  display: flex;
  width: 1100px;
  margin: 10px auto 31px;
}

.global_navigation_con div {
  position: relative;
  padding: 12px 0px 6px 77px;
  position: relative;
  line-height: 0px;
}

.global_navigation_con {
  background: url(https://via.placeholder.com/300);
}

.global_navigation_con div a {
  font-size: 2.1rem;
  line-height: 2.1rem;
  color: #333333;
  padding: 0px 40px 0px 0px;
}

.global_navigation_con div a span {
  padding: 0px 0px 0px 0px;
}

.global_navigation_con div:before {
  content: "";
  position: absolute;
  background: url(./detail-img/global_list.png) no-repeat;
  width: 22px;
  height: 40px;
  top: 0px;
  left: 36px;
}

核心问题点 #

1. 导航栏背景图设置错误：占位图尺寸不足，未设置重复规则与垂直居中，无法铺满导航栏
2. 菜单项布局参数混乱：line-height:0px导致文本垂直偏移，左侧内边距与图标定位不匹配
3. 多行文本菜单项无对齐处理：最后一项两行文本未紧凑居中
4. 菜单项分隔线缺失：设计稿中的竖线分隔未实现

修正后的代码 #

HTML代码 #

<div class="global_navigation_con">
  <div class="nav-item">
    <a href="#"><span>トピックス</span></a>
  </div>
  <div class="nav-item">
    <a href="#"><span>区画情報</span></a>
  </div>
  <div class="nav-item">
    <a href="#"><span>立地企業</span></a>
  </div>
  <div class="nav-item">
    <a href="#"><span>企業支援</span></a>
  </div>
  <div class="nav-item multi-line">
    <a href="#"><span>福知山市と</span><span>その周辺</span></a>
  </div>
</div>

CSS代码 #

/* 全局重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.global_navigation_con {
  display: flex;
  align-items: center;
  width: 1100px;
  margin: 10px auto 31px;
  /* 替换为设计稿对应的背景图，设置水平重复+垂直居中 */
  background: url(./detail-img/nav-bg.png) repeat-x center;
  height: 60px; /* 匹配设计稿导航高度 */
}

.nav-item {
  position: relative;
  flex: 1; /* 均分导航栏宽度 */
  text-align: center;
}

/* 菜单项右侧分隔线（最后一项除外） */
.nav-item:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  height: 40px;
  width: 1px;
  background-color: #ccc; /* 匹配设计稿分隔线颜色 */
}

.nav-item a {
  font-size: 2.1rem;
  line-height: 2.4rem;
  color: #333;
  text-decoration: none;
  display: inline-block;
}

/* 多行文本菜单项特殊处理 */
.nav-item.multi-line a {
  line-height: 1.8rem; /* 缩小行高让两行文本紧凑对齐 */
}

/* 导航图标垂直居中定位 */
.nav-item:before {
  content: "";
  position: absolute;
  background: url(./detail-img/global_list.png) no-repeat center;
  width: 22px;
  height: 40px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

关键调整说明 #

• 新增nav-item类统一管理菜单项样式，提升可维护性
• 用flex:1实现菜单项宽度均分，保证布局均匀
• 通过align-items:center和transform:translateY(-50%)实现图标与文本垂直居中
• 补充菜单项分隔线，匹配设计稿视觉效果
• 优化多行文本行高，确保文字排版紧凑合理

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