HTML 页脚“边距：自动”问题答案

【问题标题】：HTML footer "margin: auto" issueHTML 页脚“边距：自动”问题
【发布时间】：2020-05-18 16:05:13
【问题描述】：

我的网页页脚有一些问题。 margin: auto; 命令不适用于我的列表项。

我希望页脚中的项目占页脚宽度的 1/3，但无论我把边距放在哪里：链接中的自动命令将始终彼此相邻。

这是我的 HTML：

<footer>
  <ul>
    <li><a href="text1.html">text1</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text3.html">text3</a></li>
  </ul>
</footer>

这里是我的 CSS：

footer{
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: darkcyan;
}

footer ul{
  margin: 0;
  list-style: none; 
  text-align: center;
}

footer ul li{
  display: inline; 
}

footer ul li a{
  text-decoration: none; 
  color: black; 
  margin: auto;
}

感谢您的帮助！

【问题讨论】：

标签： html css margin footer listitem

【解决方案1】：

使用弹性盒子。解决方法在这里：

footer{
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: darkcyan;
}

footer ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none; 
  text-align: center;
}

footer ul li{
  margin: auto;
}

footer ul li a{
  text-decoration: none; 
  color: black;
}

<footer>
  <ul>
    <li><a href="text1.html">text1</a></li>
    <li><a href="text2.html">text2</a></li>
    <li><a href="text3.html">text3</a></li>
  </ul>
</footer>

【讨论】：