Question

这是我的登录表单：

login page image

如您所见，登录和注册按钮位于不同的行上。我希望他们在同一条线上。

我将注册按钮代码放在与登录相同的段落元素中。毫无疑问，它出现在同一行，但当我点击注册时，它要求我填写用户名和密码。我该如何解决这个问题？

这是我的代码：

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<p><input class="swd-button" type="submit" value="Sign In">
 </p>
</form>
<a href="register.html"><button class="swd-button">Register</button></a>

Answer 1

真正的问题是链接中的按钮是拦截点击事件。这就是为什么当你把第二个按钮作为兄弟姐妹放在第一个按钮时它不起作用。

要解决此问题，我建议您从链接中删除该按钮，将链接设置为外观，如同一个按钮，并将其移回与“登录”按钮相同的段落，设置为display: inline-block。

这是jsFiddle demo。

<强> HTML：

<form method="post" > 
    <p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
    <p><input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
    <p>
        <button class="swd-button" type="submit">Sign In</button>
        <a class="swd-button" href="register.html">Register</a>
    </p>
</form>

<强> CSS：

.swd-button {
    background: #11c3ff linear-gradient(to bottom, transparent, #009bcf);
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    display: inline-block;
    font: bold 12px Arial, Helvetica, sans-serif;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

Answer 2

添加了：

.swd-button {
    float:left;
}

http://jsfiddle.net/2es59/

Answer 3

只需将注册按钮放在<p>标记

中

<p><input class="swd-button" type="submit" value="Sign In">
    <a href="register.html"><button class="swd-button">Register</button></a>
 </p>

Fiddle

Answer 4

只需按照以下方式重新安排，并在按钮上添加一个类型：

<form method="post" > 

    <p>
        <input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required>
    </p>
    <p>
        <input id="password" type="password" placeholder="Password" style="margin:10px" required>
    </p>
    <p>
       <input class="swd-button" type="submit" value="Sign In">
       <a href="register.html"><button type="button" class="swd-button">Register</button></a>
    </p>

</form>

通常，如果您在表单中添加button，则会将其作为提交按钮来触发提交表单。因此，您需要将其指定为type="button"。

演示：http://jsbin.com/EjEbihUDu/2/

Answer 5

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<div><input class="swd-button" type="submit" value="Sign In">

</form>
<a href="register.html"><button class="swd-button">Register</button></a></div>

fiddle

Answer 6

将类添加到style="display:inline-block;"

的元素中

Answer 7

只需使用表格标签并尝试这样做......

<table>
<tr>
<td><input type="button" value="Login"></td>
<td><input type="button" value="Register"></td>
</tr>
</table>

您可以在表格中创建所有元素以获得合适的视图。

Answer 8

我得到了答案。感谢Roy M J.必须在按钮元素中仅包含type属性type =“button”。

像这样：

<a href="register.html"><button class="swd-button" type="button">Register</button></a>

所以完整的工作代码是：

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<p><input class="swd-button" type="submit" value="Sign In">
    <a href="register.html"><button class="swd-button" type="button">Register</button></a>
</p>
</form>

在HTML中将两个按钮放在同一行上

8 个答案: