这是我的标题。
我的目标是将注销按钮移到最右边，同时又不失去点击它们的能力。
现在，我尝试了相对位置和绝对位置，这将按钮向右移动，但按钮不再可点击。
- 添加行 position:relative; #my-menus(使按钮不可点击)
我还尝试添加一个间隔符，或将我的注销按钮变大，但没有用。无论我做什么，宽度都固定为 125px。 (虽然这些似乎不是有效的解决方案......)
按原样，按钮是可点击的。
我做错了什么？我更感兴趣的是为什么会发生这种情况，然后是如何解决它，因为我可以接受当前的结果。另外，如果我对所有 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;
}
最佳答案
这就是您想要完成的吗？ Fiddle
我刚刚添加:
#logout {
float:right;
}
问题是您所有的 div 元素都是 inline-block 并且它们保持内联堆叠。
您的 position: relative 使按钮不可点击，因为 #my-menus 具有 z-index: -2 并被 #header< 覆盖 元素。
关于html - 如何在另一个 div 中右对齐包含表单的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15602584/