WordPress Illdy Child主题子菜单列对齐问题求助

问题分析 #

从你提供的信息来看，子菜单第一列偏移、存在空白区域的核心原因包括：

• 原生<ul>标签默认带有padding-left，导致列表项整体偏移
• 三级子菜单的CSS规则存在冲突：注释了display: grid却保留了grid布局属性，导致布局规则无效
• 未清除原主题对子菜单的默认内边距、外边距设置

解决方案 #

替换你现有CSS中与子菜单相关的规则，将以下代码添加到「额外CSS」区域：

/* 重置所有子菜单的默认内边距和外边距 */
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
    min-width: 700px !important;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 三级子菜单启用Grid双列布局 */
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 用弹性比例代替固定50%，适配不同内容长度 */
    gap: 20px; /* 统一列/行间距，替换原column-gap */
    justify-items: flex-start;
    align-items: flex-start;
    padding: 15px; /* 可选：添加内边距避免内容贴边 */
}

/* 重置子菜单列表项的默认样式 */
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
    padding: 0;
    margin: 8px 0; /* 调整列表项上下间距 */
}

修改说明 #

1. 清除默认样式：移除ul和li的原生padding、margin，直接消除第一列的空白偏移
2. 修复Grid布局：取消display: block的注释，启用网格布局，用1fr实现等宽双列，比固定百分比更灵活
3. 统一间距规则：使用gap属性同时控制列和行的间距，避免布局混乱
4. 对齐优化：设置justify-items: flex-start确保所有列内容左对齐，避免列内元素错位

额外排查 #

如果修改后仍有偏移，可通过浏览器开发者工具（F12）检查原主题是否有更高优先级的样式，可在对应属性后添加!important强制覆盖，或补充父级选择器提升规则优先级。

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