WordPress自定义主题下拉菜单<li>间神秘间隙排查求助

这种情况我之前做WordPress主题开发时也踩过坑！大概率是行内元素的空白字符在搞事——WordPress的wp_nav_menu函数输出菜单时，<li>标签之间会自动带上换行或空格，浏览器会把这些当成空白字符渲染出来，就形成了你看到的间隙，跟margin、padding、border都没关系。

下面给你几个亲测有效的解决思路：

1. 用CSS快速消除空白字符影响 #

这是最简单的方法，不需要改PHP代码：
给下拉菜单的父容器（通常是ul.sub-menu）设置font-size: 0，让空白字符失去渲染空间，再给里面的<li>恢复正常字体大小即可。

/* 针对下拉菜单父容器 */
.sub-menu {
  font-size: 0; /* 彻底消除空白字符间隙 */
  margin: 0;
  padding: 0;
  list-style: none; /* 可选，去掉默认列表圆点 */
}

/* 恢复子项的正常样式 */
.sub-menu li {
  font-size: 16px; /* 改成你需要的字体大小 */
  margin: 0;
  padding: 0;
  line-height: 1.5; /* 按需调整行高 */
}

2. 调整WordPress菜单的输出格式 #

如果不想用CSS的“hack”方式，可以通过修改wp_nav_menu的参数，让输出的<li>标签之间没有空白。

你可以自定义一个导航Walker类，强制去掉标签间的换行和空格：

// 在主题的functions.php中添加这个类
class Walker_Nav_Menu_No_Spaces extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
    // 直接拼接<li>标签，不添加任何换行或空格
    $output .= '<li class="' . esc_attr(implode(' ', $item->classes)) . '">';
    $output .= '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
  }
  function end_el(&$output, $item, $depth = 0, $args = null) {
    $output .= '</li>';
  }
}

然后在调用菜单的地方（比如header.php）替换成：

wp_nav_menu(array(
  'theme_location' => '你的菜单位置标识',
  'walker' => new Walker_Nav_Menu_No_Spaces()
));

3. 用浏览器工具排查潜在问题 #

打开浏览器开发者工具（按F12），选中有间隙的<li>元素，检查：

• 盒模型面板，确认margin、padding确实是0
• 查看是否继承了父元素的line-height或letter-spacing，如果有，直接在<li>上覆盖这些属性
• 检查是否有伪元素（比如:before/:after）意外添加了内容，导致间隙

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