javascript - 带有 css 的 jade 中的按钮不起作用

Question

我正在尝试让登录和注册按钮在我的页面上工作。当登录按钮的代码在顶部时，登录按钮不起作用，而当注册按钮的代码在顶部时，注册按钮不起作用。

extends layout

block content
  h1= title
  p Welcome to #{title}
  br
  br
  body
  div(id="banner2")
  div(id="signin")
    form#SignIn(name="sign in", method="get", action="signin")
        button#btnSignIn(type="submit") Sign In
  div(id="register")
    form#Register(name="register", method="get", action="register")
        button#btnRegister(type="submit") Register

这是这些按钮的 css 文件中的代码:

#register{
    position: absolute;
    right: 180px;
    padding: 110px;
    top: 20px;
    width: 100px;
}
#signin{
    position: absolute;
    right: 240px;
    padding: 110px;
    top: 20px;
    width: 100px;
}

看起来像这样:

使用上面的代码，登录按钮不起作用。

请帮助我让两个按钮都起作用!

Answer 1

您需要更改 css，首先删除 padding:110px; 然后将 right:240px 更改为 right:300px;对于 #btnSignIn(单击运行代码片段)-

#btnRegister{
    position: absolute;
    right: 180px;
    top: 20px;
    width: 100px;
}
#btnSignIn{
    position: absolute;
    right: 300px;
    top: 20px;
    width: 100px;
}

<button id="btnSignIn">Sign In</button>
<button id="btnRegister">Register</button>