这是我的标题。
我的目标是将注销按钮移到最右边，而不会失去点击它们的能力。
现在，我尝试了相对位置和绝对位置，这将按钮向右移动，但按钮不再可点击。
- 添加行位置：相对；到#my-menus（使按钮无法点击）
我还尝试添加一个垫片，或者使我的注销按钮更大，但没有奏效。无论我做什么，宽度都被固定在 125 像素。（尽管这些似乎不是有效的解决方案......）
照原样，按钮是可点击的。
我究竟做错了什么？我更感兴趣的是为什么会发生这种情况，然后是如何解决它，因为我可以接受目前的结果。另外，如果我对所有 div 完全使用了错误的方法，而没有，请告诉我。我想学习。
这是html和css文件：
<body>
<div id="header">
<div id="title">
<div>
<img src="styles\monkey-head-pic-hi.png" alt="">
RotoMonkey
</div>
<div id="userGreeting">
<p>Welcome <%=session.getAttribute("name")%>!</p>
</div>
</div>
<div id="my-menus">
<div>
<form method="get" action="homePageForm.jsp">
<input class="menuItem" type="submit" value="Home">
</form>
</div>
<div>
<form method="get" action="loginForm.jsp">
<input class="menuItem" type="submit" value="Members">
</form>
</div>
<div>
<form method="get" action="loginForm.jsp">
<input class="menuItem" type="submit" value="Player Stats">
</form>
</div>
<div>
<form method="get" action="loginForm.jsp">
<input class="menuItem" type="submit" value="Create League">
</form>
</div>
<div>
<form method="get" action="loginForm.jsp">
<input class="menuItem" type="submit" value="Join league">
</form>
</div>
<div id="logout">
<form method="get" action="loginForm.jsp">
<input class="menuItem" type="submit" value="Logout">
</form>
</div>
</div>
</div>
</body>
#header
{
width:100%;
}
#header div
{
width:1000px;
}
#title
{
background-color:white;
height:75px;
color:Green;
font-size: 40px;
}
#title div
{
float:left;
width:500px;
height:75px;
}
img
{
max-width: 100%;
max-height: 100%;
margin:5px;
vertical-align: middle;
}
#userGreeting
{
position:relative;
font-size: medium;
}
#userGreeting p
{
position:absolute;
bottom:0;
right:0;
margin: 0;
padding: 0;
margin-right: 20px;
margin-bottom:5px;
}
#my-menus
{
background-color:green;
overflow:hidden;
width:1000px;
height:auto;
z-index:-2;
}
#my-menus div
{
display:inline-block;
height:auto;
text-align:center;
border-right:thin solid white;
width:125px;
}
/* #logout */
/* { */
/* position:absolute; */
/* right:0; */
/* } */
body {
width: 1000px;
margin: 50px auto;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2),
inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
}
input[type=submit] {
border: green;
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 );
color: #fff;
padding: 5px 5px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
z-index:-10;
}