WordPress Storeship主题分类菜单行高问题修复咨询

步骤1：定位菜单选择器 #

用浏览器开发者工具（F12）右键检查分类菜单元素，找到对应的CSS选择器，通常这类选择器类似 .main-navigation .menu-item-category a 或 .storeship-main-nav .menu-item a。

步骤2：添加自定义CSS #

在WordPress后台「外观」→「自定义」→「额外CSS」面板中添加以下代码（替换选择器为你找到的实际值）：

/* 维持菜单整体布局的垂直高度，防止错位 */
.main-navigation .menu-item-category {
  line-height: 55px; /* 替换成主题原有的line-height数值 */
}

/* 缩小分类文本换行后的行间距 */
.main-navigation .menu-item-category a {
  display: inline-block;
  line-height: 1.2; /* 设置紧凑行高，比如1.2-1.4，按需调整 */
  vertical-align: middle;
}

如果直接给链接设置行高导致容器高度异常，可尝试这种写法：

/* 菜单容器保留原line-height，确保布局连贯 */
.main-navigation .menu-item-category a {
  line-height: 55px; /* 主题原有行高 */
  position: relative;
  padding: 0 10px; /* 保持原有的左右内边距 */
}

/* 用绝对定位控制文本块的换行间距 */
.main-navigation .menu-item-category a span {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  line-height: 1.2; /* 紧凑行高 */
}

核心逻辑 #

• 菜单容器的line-height必须保留，这是维持菜单布局垂直对齐的关键，移除它会导致菜单项高度不一、布局错位。
• 通过将分类文本转为inline-block或绝对定位，单独设置更小的line-height，既能缩小换行后的行间距，又不会改变菜单容器的整体高度，保证布局连贯。

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