如何正確對齊另一個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？

回答

相關問題