Question

我的联系表单存在问题。有两个左浮动列，其名称为＆＃34; name＆＃34;和＆＃34;电子邮件＆＃34;在一个，然后＆＃34;消息＆＃34;在另一个。我希望我的按钮位于两列之下，并在表单中居中。

我的问题是，当它低于50％时，该按钮会显示＆＃34;消息＆＃34;。即使其父级是表单，按钮也希望使用＆＃34;消息＆＃34;列。

Here是jsfiddle中我的问题的链接。

这是我的HTML：

    <form id="ajax-contact" method="post" action="mailer.php">
        <div class="column">
            <label for="name">name</label>
            <input type="text" id="name" name="name" required>
            <label for="email">email address</label>
            <input type="email" id="email" name="email" required>
       </div>

        <div class="column">
            <label for="message">message</label>
            <textarea id="message" required></textarea>
        </div>
        <button id="bottom-button" type="submit">Send</button>
    </form>

我的CSS：

form {
  padding: 0 5% 0 5%; }
  form .column {
    width: 100%; }
  form label {
    display: block;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    color: #553445;
    font-size: 1.5em;
    line-height: 1em;
    padding: 0 5px 5px 2px;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px; }
  form input, form textarea {
    display: block;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 1em;
    padding: 5px 10px;
    color: #553445;
    width: 100%;
    background: rgba(85, 52, 69, 0.1);
    border: none;
    border-bottom: 3px solid rgba(85, 52, 69, 0.4);
    outline: none; }
    form input:active, form input:focus, form textarea:active, form textarea:focus {
      border-bottom: 3px solid #fff; }
  form input {
    margin-bottom: 40px; }
  form textarea {
    min-height: 200px;
    resize: none; }

button {
  background: #e85657;
  color: #fff;
  padding: 0.5em;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  padding-left: 1.05em;
  padding-right: 1.05em;
  cursor: pointer;
  margin-bottom: 3em;
  border-radius: 3px;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  button:hover {
    background: #fff;
    color: #e85657; }
  button:focus {
    outline: none; }
  button a {
    color: inherit; }

#bottom-button {
    width: 100%;
    border-radius: 0 0 3px 3px; }

@media screen and (min-width: 30em) {
  #ajax-contact .column {
    float: left;
    width: 50%; }
  #ajax-contact textarea {
    min-height: 146px; }
  #ajax-contact #bottom-button {
    border-radius: 3px;
    width: auto; } }

Answer 1

您的按钮不是样式div <div class="column">的一部分。

在此处查看更新的JSFiddle：http://jsfiddle.net/b9rp3Ls4/6/

编辑：根据评论，我使用W3C中的资源集中了它，可在此处找到：http://www.w3.org/Style/Examples/007/center.en.html

新的JS小提琴：http://jsfiddle.net/b9rp3Ls4/7/

如果您想要居中，最好使用同一个父母。使用边距将其放在中间。

不能从textarea中解开按钮

1 个答案: