html - 将页脚中的列表居中对齐

Question

我的网站页脚现在只有几个链接，如下所示，将来可能有 N 个链接。基本上我想将链接对齐到页脚的中心。我知道如果我将固定宽度或位置添加到我编写的以下 CSS 中，它会起作用。但我不想设置任何固定宽度，因为将来链接的数量会增加。将链接对齐到中心的最佳方式是什么。

HTML 代码

  <footer>
      <ul>
          <li> <a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>          
      </ul>
   </footer>

CSS

  footer{
      background: #EEEEEE;
      margin: 0 auto;
      height: 30px;
      padding-top: 20px;
      width: 100%;
      text-align: center;
  }
  footer ul{
  margin: 0px;
  }
  footer li {
      float: left;
      list-style-type: none;
      line-height: 9px;
      height: 11px;
      border-right: 1px solid #354052;
      padding: 0px 10px;
  }
  footer li a{
      text-decoration: none;
      color: #354052;
      font-size: 12px;
  }

Answer 1

试试这个

footer{
      background: #EEEEEE;
      margin: 0 auto;
      height: 30px;
      padding-top: 20px;
      width: 100%;
      text-align: center;
  }
  footer ul{
  margin: 0px;
    padding:0;
  }
  footer li {
    /*  float: left;  */
      list-style-type: none;
      line-height: 9px;
      height: 11px;
      border-right: 1px solid #354052;
      padding: 0px 10px;
    display:inline;
  }
  footer li a{
      text-decoration: none;
      color: #354052;
      font-size: 12px;
  }

<footer>
      <ul>
          <li> <a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>          
      </ul>
   </footer>