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

Question

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

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

这是我的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;
}

感谢您的帮助！

Answer 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>