HTML 页脚 "margin: auto" 问题

Question

我的网页页脚有一些问题。 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;
}

感谢您的帮助！

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>

HTML 页脚 "margin: auto" 问题

HTML footer "margin: auto" issue

html

css

margin

listitem

footer