无法从文本区域取消粘贴按钮

Question

我制作的联系表有问题。有两个左浮动列，一个是 "name" 和 "email"，另一个是 "message"。我希望我的按钮位于两列下方并在表单中居中。

我的问题是，当它小于 50% 时，按钮会粘在 "message" 上。即使它的父项是表单，该按钮仍希望使用 "message" 列来设置自己的样式。

Here 是我在 jsfiddle 中的问题 link。

这是我的 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 Fiddle: http://jsfiddle.net/b9rp3Ls4/7/

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

无法从文本区域取消粘贴按钮

Can't unstick button from textarea

html

css

forms

media-queries

contact-form