移动端分辨率下使用ul/li实现Footer布局：列数为2时居中最后一个li元素

没问题！完全可以用ul/li实现你要的移动端Footer布局，根本不用换标签～你的问题出在column-count:2的布局逻辑上——它是按「列」来流式填充内容的，最后一个元素自然会落在左侧列，没法直接让它居中。咱们换个更合适的布局方案就能搞定：

方案1：Flexbox实现（推荐） #

这种方案兼容性好，逻辑清晰，很适合移动端场景：

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}
ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 元素超出宽度时自动换行 */
  justify-content: center; /* 核心：控制行内元素对齐，单行元素自动居中 */
  gap: 1rem; /* 可选：给元素之间添加间距，优化视觉效果 */
}
ul li {
  list-style: none;
  text-align: center;
  flex: 0 1 calc(50% - 0.5rem); /* 每个元素占容器一半宽度，减去gap的一半避免溢出 */
}

原理说明： #

• flex-wrap: wrap 让li元素在容器宽度不够时自动换行；
• justify-content: center 会让每行的li在可用空间内居中排列，当最后一行只有一个元素时，它就会自动居中；
• flex: 0 1 calc(50% - 0.5rem) 确保每个li尽量占容器一半宽度，同时允许在空间不足时适当缩小，减去gap的一半是为了避免元素超出容器范围。

方案2：Grid实现（更简洁） #

Grid布局代码更简洁，适合需要更精细控制网格的场景：

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}
ul {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自动生成列，最小宽度150px，剩余空间平分 */
  gap: 1rem; /* 元素间距 */
  justify-items: center; /* 每个li在网格单元格内居中 */
}
ul li {
  list-style: none;
  text-align: center;
  width: 100%; /* 让li占满网格单元格宽度 */
}

原理说明： #

• repeat(auto-fill, minmax(150px, 1fr)) 会根据容器宽度自动创建列，当空间不足以放下新列时自动换行；
• justify-items: center 确保每个li在自己的网格单元格内居中，当最后一行只有一个元素时，它的单元格会占满剩余的容器宽度，元素自然就居中了。

两种方案都不需要更换ul/li标签，完美满足你的需求。相比column-count，Flexbox和Grid在这种需要灵活控制行内元素对齐的场景下，适配性和可控性都要强得多～

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