时间戳

首页 > 解决方案 > 如何使用 CSS 在页脚中将此表单居中？

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>

标签： htmlcssforms

解决方案

我想你可以试试这个方法。希望这对你有用。

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

推荐阅读