用css在玉石上的按钮不起作用

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>