如何在WordPress中让菜单前几项居左、最后两项居右

下面给两种无需依赖主题设置的实现方案，根据你的HTML结构选择即可：

方案1：调整HTML结构+Flex布局（直观易维护） #

如果可以修改菜单的HTML代码，把菜单项分成左右两个分组：

<!-- 拆分后的菜单结构 -->
<header class="site-header">
  <nav class="main-nav">
    <div class="nav-left">
      <a href="/">Home</a>
      <a href="/page1">Page1</a>
      <a href="/page2">Page2</a>
      <a href="/page3">Page3</a>
      <a href="/page4">Page4</a>
      <a href="/page5">Page5</a>
    </div>
    <div class="nav-right">
      <a href="/page6">Page6</a>
      <a href="/page7">Page7</a>
    </div>
  </nav>
</header>

然后添加自定义CSS：

.main-nav {
  display: flex;
  justify-content: space-between; /* 左右分组两端对齐 */
  align-items: center; /* 保证菜单项垂直居中 */
  width: 100%; /* 占满父容器宽度，否则无法生效 */
}

/* 可选：给菜单项添加间距，避免挤在一起 */
.nav-left a, .nav-right a {
  margin-right: 1rem;
}
.nav-right a:last-child {
  margin-right: 0;
}

方案2：纯CSS修改（无需调整HTML结构） #

如果不想改动HTML，用CSS选择器定位最后两个菜单项，通过margin-left: auto实现自动靠右：

假设你的菜单是标准无序列表结构：

<nav class="main-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/page1">Page1</a></li>
    <li><a href="/page2">Page2</a></li>
    <li><a href="/page3">Page3</a></li>
    <li><a href="/page4">Page4</a></li>
    <li><a href="/page5">Page5</a></li>
    <li><a href="/page6">Page6</a></li>
    <li><a href="/page7">Page7</a></li>
  </ul>
</nav>

添加自定义CSS：

.main-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* 必须占满宽度才能生效 */
  align-items: center;
}

/* 给倒数第二个菜单项设置自动左外边距，把前面的元素挤到左侧 */
.main-nav ul li:nth-last-child(2) {
  margin-left: auto;
}

/* 可选：调整菜单项间距 */
.main-nav ul li {
  margin-right: 1rem;
}
.main-nav ul li:last-child {
  margin-right: 0;
}

如何添加自定义CSS？ #

你可以在主题的「自定义」面板中找到「额外CSS」/「自定义CSS」选项，将上述代码粘贴进去；如果没有该选项，也可以修改主题的style.css文件（注意提前备份，避免主题更新导致代码丢失）。

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