如何正确对齐另一个div中包含窗体的div？

这是我的标题。如何正确对齐另一个div中包含窗体的div？

enter image description here

我的目标是注销按钮移动到最右边，没有松动的点击他们的能力。

现在，我尝试了相对位置和绝对位置，并将按钮移动到右侧，但不再点击按钮。

添加行位置：relative;以＃我的菜单（使按钮无法点击）

我也尝试添加间隔，或者让我的注销按钮更大，但没有奏效。无论我做什么，宽度都是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; 
}

来源

2013-03-24 Andre Viau

是这样你试图完成什么？ Fiddle

我只是说：

#logout { 
    float:right; 
}

的问题是，你的所有div元素inline-block和他们保持堆叠内联。 position: relative使按钮不可点击，因为#my-menus有z-index: -2并被#header元素覆盖。

来源

2013-03-24 19:11:40

我的上帝，现在看起来很简单。感谢您的解释。虽然，为什么我的按钮首先可以点击？＃my-menues在标题中，所以z-index是相对于#header？ – 2013-03-24 19:25:14

这也必须是为什么我需要溢出：隐藏的绿色酒吧显示....感谢一堆！ – 2013-03-24 19:27:31

根据文档，只有在明确指定'position'属性时'z-index'属性才适用。这就是为什么没有'position：relative'而没有重叠的原因。 – 2013-03-24 19:28:52

你可以在你的CSS使用此代码为右对齐一个div

div{float:right;}

来源

2013-03-24 19:11:40

如何正确对齐另一个div中包含窗体的div？

回答

相关问题