html - 输入和提交按钮在同一行

Question

我在 Wordpress (Sendpress) 中使用了一个插件，并尝试对表单进行一些更改。 html代码是这样的:

  <form class="sendpress-signup" method="post" id="sendpress_signup">
    <div id="form-wrap">
      <input type="hidden" value="1688" class="sp_list" id="list" name="sp_list" />

      <p name="email"><label for="email">Newsletter - Stay Tuned:</label> <input type=
      "text" name="sp_email" value="" orig="Newsletter - Stay Tuned" class=
      "sp_email" /></p>

      <p class="submit"><input type="submit" name="submit" id="submit" class=
      "sendpress-submit" value="Submit" /></p>
    </div>

这是我到目前为止所做的 jsFiddle jsFiddle

我想要做的是将提交按钮放在输入字段旁边，它们之间没有空格。有没有办法只用 CSS 来做到这一点？我现在更喜欢更改插件代码。

Answer 1

像这样尝试: Updated Demo

HTML:

 <p name="email">
            <label for="email">Newsletter - Stay Tuned:</label>
            <input type="text" name="sp_email" value="" orig="Newsletter - Stay Tuned" class="sp_email" />
             <span class="submit">
            <input type="submit" name="submit" id="submit" class="sendpress-submit" value="Submit" />
        </span>
        </p>

CSS:

input[type="text"] {
    border: 3px solid #be2e26;
    padding: 5px;
}
.sendpress-submit {
    margin: 0 0 0 -7px;
    background: none repeat scroll 0 0 #be2e26;
    border-radius: 5px;
    color: white;
    padding: 4px 5px;
   border: 3px solid #be2e26;
}