Question

我在页脚中有一个堆积的列表和一个表单，我希望该列表向左浮动，并且我希望表单位于页面的中心，如何在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>

Answer 1

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

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

Answer 2

首先，您应该将列表放在另一个div中：

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

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

然后将页脚的宽度设置为100％：

footer { width: 100%; }

然后定位它们：

.list { display: inline-block;
        float:left;}
form {margin:0 auto;}

Answer 3

有一个名为text-align的CSS属性。您可能正在使用它来使文本与页面中心对齐。

尝试将以下代码添加到代码段text-align: center;中。为了使表单与列表一致，我认为使用flexbox是实现此目的的最佳方法。尝试将display: flex;添加到页脚：

footer a {
  /*margin-left: 100px; /*<-- When using flexbox and using justify-content, you might not be needing this*/
  margin-bottom: 18px;
  display: block;
}

form#center {
  text-align: center;
}

footer#flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

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

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

还有许多其他不同的方法来使元素居中（例如margin-left: auto; + margin-right: auto;技术）：

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

form#center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 175px; /*<-- requires a fixed width though*/
}

<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 id="center">
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

Answer 4

尝试以下代码

/* Try this*/

footer{
text-align:center;
border: 1px solid #80808017;
}

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

如何使用CSS将此表单置于页脚内部？

4 个答案: