如何用CSS让WordPress导航菜单项适配文本长度并合理间距

问题说明 #

当前导航菜单项存在过多空白，无法贴合文本内容宽度，需要让菜单项尺寸适配文本长度，消除冗余空白。

当前效果：

预期效果：

已尝试的无效代码 #

/* ATTEMPT 1 */
.main-navigation li {
    display: inline
    float:left;
    clear:left;
    border:1px solid red;
}

/* ATTEMPT 2 */
.main-navigation li  {
  padding: 0;
  margin: 0;
  border: 1px solid red;
  position: absolute;
}

.main-navigation li  {
  list-style-type: none;
  float: left;
  position: relative;
  padding-right: 10px;
}

.main-navigation li  {
  text-decoration: none;
}


/* ATTEMPT 3 */
.main-navigation li  {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}


.main-navigation li  {
  display: table-cell;
  width: auto;
  text-align: center;
}

补充的页面HTML结构 #

<style>
    .recentcomments a {
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important;
    }
</style>
<style type="text/css">
    #wpadminbar ul li#wp-admin-bar-ucp-info {
        padding: 5px 0;
    }
    #wpadminbar ul li#wp-admin-bar-ucp-settings,
    #wpadminbar ul li#wp-admin-bar-ucp-status {
        padding-bottom: 2px;
    }
    #wpadminbar i.ucp-status-dot {
        font-size: 17px;
        margin-top: -7px;
        color: #02ca02;
        height: 17px;
        display: inline-block;
    }
    #wpadminbar i.ucp-status-dot-enabled {
        color: #87c826;
    }
    #wpadminbar i.ucp-status-dot-disabled {
        color: #ea1919;
    }
    #wpadminbar #ucp-status-wrapper {
        display: inline;
        border: 1px solid rgba(240, 245, 250, 0.7);
        padding: 0;
        margin: 0 0 0 5px;
        background: rgb(35, 40, 45);
    }
    #wpadminbar .ucp-status-btn {
        padding: 0 7px;
        color: #fff;
    }
    #wpadminbar #ucp-status-wrapper.off #ucp-status-off {
        background: #ea1919;
    }
    #wpadminbar #ucp-status-wrapper.on #ucp-status-on {
        background: #66b317;
    }
    #wp-admin-bar-under-construction-page img.logo {
        height: 17px;
        margin-bottom: 4px;
        padding-right: 3px;
    }
    body.wp-admin #wp-admin-bar-under-construction-page img.logo {
        margin-bottom: -4px;
    }
</style>
<style>
    .e-con.e-parent:nth-of-type(n + 4):not(.e-lazyloaded):not(.e-no-lazyload),
    .e-con.e-parent:nth-of-type(n + 4):not(.e-lazyloaded):not(.e-no-lazyload) * {
        background-image: none !important;
    }
    @media screen and (max-height: 1024px) {
        .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload),
        .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload) * {
            background-image: none !important;
        }
    }
    @media screen and (max-height: 640px) {
        .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload),
        .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload) * {
            background-image: none !important;
        }
    }
</style>

<style id="wp-custom-css">
...
    .main-navigation {
        display: flex;
        gap: 0.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-navigation li a {
        border: 1px solid red;
        text-decoration: none;
        color: unset;
    }

...
</style>

<div class="main-header-bar-navigation">
    <nav class="site-navigation ast-flex-grow-1 navigation-accessibility site-header-focus-item" id="primary-site-navigation-desktop" aria-label="Site Navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope">
        <div class="main-navigation ast-inline-flex">
            <ul id="ast-hf-menu-1" class="main-header-menu ast-menu-shadow ast-nav-menu ast-flex submenu-with-border stack-on-mobile">
                <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-26"><a href="[link]" class="menu-link">HOME</a></li>
                <li id="menu-item-1715" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1715"><a href="[link]" class="menu-link">GALLERY</a></li>
                <li id="menu-item-2052" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-781 current_page_item menu-item-2052">
                    <a href="[link]" aria-current="page" class="menu-link">GIFT CARD</a>
                </li>
                <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27">
                    <a href="#" class="menu-link">LOCATION</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span><span class="ast-icon icon-arrow"></span></button>
                    <ul class="sub-menu">
                        <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-28">
                            <a href="[link]" class="menu-link">Address</a>
                        </li>
                        <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="[link]" class="menu-link">Address</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

解决方案 #

添加以下CSS代码到你的自定义CSS区域：

/* 让一级菜单项宽度贴合文本内容 */
.main-header-menu > li {
    width: auto;
    flex: none; /* 取消flex布局的自动宽度分配 */
}

/* 调整菜单项链接的内边距，消除多余空白 */
.main-header-menu > li > a.menu-link {
    padding: 0.5rem 1rem; /* 可根据视觉需求调整上下左右内边距 */
    white-space: nowrap; /* 防止文本换行 */
}

/* 调整子菜单按钮与文本的间距 */
.main-header-menu > li > .ast-menu-toggle {
    margin-left: 0.3rem;
}

关键说明 #

• 你的主题中实际的菜单列表是.main-header-menu，而非外层的.main-navigation容器，之前的CSS选错了作用元素，导致样式无效。
• .main-header-menu是flex布局，默认会让子项平分容器宽度，设置flex: none可以让菜单项宽度由内部文本决定。
• 通过调整链接的padding，可以精准控制菜单项的空白大小，同时保证点击区域的可用性。

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