CSS word-spacing属性异常：footer列表项无法均匀分布

问题根源 #

你当前用word-spacing控制列表项间距是错误的——这个属性是用来调整文本单词之间的间距，而非元素之间的间距。同时，inline-block元素在HTML里的换行空白字符会额外占据空间，两者叠加导致了间距不均匀的问题。

推荐解决方案（现代浏览器优先） #

用Flexbox布局，这是实现均匀分布最简洁可靠的方式：

/* 给ul容器设置Flex布局 */
.footer {
  display: flex;
  justify-content: space-around; /* 元素左右均分间距 */
  /* 若需要首尾贴边，改用 justify-content: space-between; */
  list-style: none; /* 去掉默认列表圆点 */
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

/* 无需再给li设置display:inline-block和word-spacing */
.footer li {
  /* 可按需设置字体、颜色等样式 */
}

兼容旧浏览器方案 #

如果需要兼容不支持Flexbox的旧浏览器，可通过消除inline-block元素间的空白字符+margin控制间距：

.footer {
  font-size: 0; /* 消除inline-block元素间的空白字符 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  display: inline-block;
  font-size: 16px; /* 恢复正常字体大小 */
  margin: 0 10px; /* 左右各10px，总间距为20px */
}

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