html - 如何使用CSS将此表单放在页脚内部居中？

我的页脚中有一个堆积的列表和一个表单，我希望列表向左浮动，并且希望表单位于页面的中心，如何在CSS文件中执行此操作？

footer a {
  margin-left: 100px;
  margin-bottom: 18px;
  display: block;
}

form {
  float: center;
}

<footer>
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>

  <form>
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

最佳答案

我认为您可以尝试这种方式。希望这对您有用。

.footer-list {
  margin-bottom: 18px;
  width: 35%;
  float: left;
}

.footer-form {
  width: 65%;
  margin-left: 15%;
}

li {
  list-style: none;
}

form {
  padding: 10px;
}

<footer>
  <div class="footer-list">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Where To stay</a></li>
      <li><a href="#">Transportation</a></li>
      <li><a href="#">Island Activities</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </div>
  <div class="footer-form">
    <form>
      Email Newsletter:
      <br>
      <input type="text" name="Email" Value="">
      <br>
      <input type="submit" value="Sign Up">
    </form>
  </div>

</footer>

关于html - 如何使用CSS将此表单放在页脚内部居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58976032/