html - 当低于文本区域时，按钮会粘在窗体上

Question

我正在尝试将一个按钮置于我正在制作的表单底部的中央。我有这个媒体查询:@media screen and (min-width: 30em)，它将列从查询上方的 100% 到 50%。同样，按钮从 width: 100% 变为 width: auto。

它应该看起来像 this , 但提交按钮在底部

但是，当我将按钮放在底部时，它似乎粘在右栏上。看起来像 this出于某种原因。

这是我的 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

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;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    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;
}
#form-messages {
    font-family:"Lato", sans-serif;
    font-weight: 400;
    color: #553445;
    font-size: 1.5em;
    line-height: 1em;
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 40px;
}
form, #form-messages {
    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;
}
@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

尝试使用以下 clear 属性更新按钮 CSS:

#ajax-contact #bottom-button {
    clear: both;
    border-radius: 3px;
    width: auto;
}

应该像看到的那样做技巧 here .