Question

非常奇怪，今天我花了一个小时试图找出我做错了什么。有一个电子邮件注册表单。四个输入字段和一个提交按钮。在我的设计中，提交按钮应位于四个字段的中心。但是，无论我使用或不使用float：left，按钮都是齐左对齐的。或清楚：两者;或保证金：0自动;换句话说，通常的嫌疑人。

这是网站。表单位于底部：http://ellismarsalis2017.jasonmarsalis.com/

以下是代码：

#footerForm {
  position: relative;
  float: none;
  width: 728px;
  height: auto;
  margin: 0 auto;
  padding: 18px auto 0;
}

footer form input {
  float: left;
  color: #2a358f;
  width: 44%;
  background: #edc53e;
  border-radius: 8px;
  margin: 0 2% 14px;
  font-size: 18px;
  padding: 0 .5%;
  border: none;
}

footer form input.signUp {
  font-family: "clarendon-urw", serif;
  float: none!important;
  clear: both;
  background: #2a358f;
  color: #edc53e;
  margin: 0 auto;
  font-size: 18px;
  padding: 8px 24px;
  border: none;
  text-align: center;
}

footer p {
  padding: 28px 0;
}

<div id="footerForm">
  <form name="" method="post" action="http://www.yoursite.com/box.php">
    <input name="name" type="text" id="name" value="Your Name">
    <input name="field1" type="text" id="field1" value="Your City">
    <input name="email" type="text" id="email" value="Your Email Address">
    <input name="field2" type="text" id="field2" value="Your State">
    <input name="p" type="hidden" id="p" value="7">
    <input type="hidden" name="nlbox[1]" value="1">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
  </form>
</div>

Answer 1

你应该把它放在DIV部分并使它的样式text-align：center就像那样：

<div style="text-align:center;">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

或使用类和css代码：

HTML

<div class="submitsection">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

CSS

.submitsection {
    text-align:center;
}

CSS：无法获取提交按钮到中心

1 个答案: