使用JavaScript实现移动端奇数数量列表项对齐：末项居中

嘿，这个移动端列表的对齐需求我刚好处理过，给你一套完整的实现方案，分CSS布局和JS逻辑两部分来搞定：

第一步：先搭好基础的CSS布局 #

首先我们给列表设置flex布局，让默认的<li>并排显示，同时准备一个专门的类来处理最后一项的居中效果。这里用媒体查询确保只在移动端生效：

/* 基础列表样式 */
.mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选：控制<li>之间的间距 */
}

.mobile-list li {
  flex: 1 1 calc(50% - 5px); /* 两个<li>占满一行，减去gap的一半 */
  background: #f0f0f0;
  padding: 10px;
  box-sizing: border-box;
  text-align: center; /* 可选：让<li>内部文字居中 */
}

/* 最后一项居中的专用类 */
.center-last-item {
  flex: 0 1 auto; /* 取消占满一半宽度的设置 */
  margin: 0 auto; /* 实现水平居中 */
}

对应的HTML结构就用你提供的示例：

<ul class="mobile-list">
  <li>name1</li>
  <li>name2</li>
  <li>name3</li>
  <li>name4</li>
  <li>name5</li>
</ul>

第二步：用JavaScript判断并应用样式 #

接下来我们需要判断<li>的数量是奇数还是偶数，然后动态给最后一项加类。同时还要考虑窗口大小变化的适配（比如手机横竖屏切换）：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  const mobileList = document.querySelector('.mobile-list');
  const listItems = mobileList.querySelectorAll('li');
  const itemCount = listItems.length;

  // 封装一个处理对齐的函数，方便复用
  function adjustListAlignment() {
    const isMobile = window.matchMedia('(max-width: 768px)').matches;
    
    if (isMobile) {
      // 判断数量是否为奇数
      if (itemCount % 2 !== 0) {
        listItems[itemCount - 1].classList.add('center-last-item');
      } else {
        // 偶数的话移除居中类，避免残留样式
        listItems[itemCount - 1].classList.remove('center-last-item');
      }
    } else {
      // 非移动端时恢复默认布局
      listItems[itemCount - 1].classList.remove('center-last-item');
    }
  }

  // 页面加载时执行一次
  adjustListAlignment();

  // 监听窗口大小变化，适配横竖屏切换
  window.addEventListener('resize', adjustListAlignment);
});

一些小提示 #

• 如果你调整了<li>之间的gap值，记得同步修改CSS里calc(50% - 5px)的数值（比如gap是15px的话，就改成calc(50% - 7.5px)），确保两个<li>刚好占满一行
• 如果你的列表是动态生成或会更新的，记得在列表内容变化后调用adjustListAlignment()函数重新判断

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