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;
}

Answer 2

试试这个演示 Fiddle

p[name="email"]{
float:left;
}

输入和提交按钮在同一行

2 个答案: