html - 将两个按钮放在 HTML 中的同一行

Question

这是我的登录表单:

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

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

这是我的代码:

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