相對位元件

Question

我的標記看起來是這樣的：

<div id="content"> 
    <img src="some_content.jpg"> 
    <form action="..."> 
    <input type="text" ... > 
    <input type="submit" ...> 
    </form> 

    <div id="forgotyourpassword"> 
    <a href="somelink.com">Forgot your password?</a> 
    </div> 
</div> 

標記彌補由CMS生成的表單，所以我不能改變它。

content div有一個固定的寬度和高度，這樣我可以在頁面中垂直和水平居中。目前，content內的所有兒童都設置爲display: inline-block，然後在content div內水平和垂直對齊。

我已經對準了忘記密碼的鏈接是這樣的：

這裏是有問題的鏈接的CSS：

#forgot-password{ 

    float: right; 
    margin: 0; /* reset some stuff inherited from parent */ 
    padding: 0; /* reset some stuff inherited from parent */ 
    margin-right: 171px; 
    margin-top: -20px; 
} 

這裏有一些相關的CSS：

#content{ 
    position:absolute; 
    width: 650px; 
    left:50%; 
    top:50%; 
    height:242px; 
    margin-top:-126px; 
    margin-left: -325px; 
    text-align: center; 
} 

#content > *{ 
    vertical-align: middle; 
    display: inline-block; 
    zoom:1; 
    *display:inline; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

這一切都很好。但是，在某些情況下，例如，如果表單提交發生錯誤，則後端會在<form>元素的後面附加錯誤消息。

在這種情況下，我希望鏈接對齊，像這樣：

與我的CSS，因爲它代表的問題是，在忘記密碼的鏈接是由其父的底部對齊（content） 。我需要將它對準按鈕。

我最初的想法是我將直接在表格下對齊forgotyourpassword div。因此，如果添加錯誤消息時表單的大小發生更改，則鏈接將被向下推。

然後，我可以將margin-top設置爲負像素數量，然後將我的forgotyourpassword div備份到x像素，然後將該元素與提交按鈕對齊，無論該窗體已經變得多高。

我發現，這種情況並非如此：

• 在Firefox 10中，forgotyourpassword DIV似乎並沒有獲得通過像素的量「推」我已經定義，一旦它與重疊內容區域的形式。
• 在IE9中，forgotyourpassword出現在表單上方！

有沒有辦法用CSS來做到這一點，並使它與IE7及以上版本和Firefox？

Answer 1

由於我無法更改窗體的標記，因此我無法將forgotyourpassword的div作爲窗體的子項插入。

所以，我加了包裝的div：

<div id="content"> 
    <img src="some_content.jpg"> 
    <div id="wrapper> 
     <form action="..."> 
     <input type="text" ... > 
     <input type="submit" ...> 
     </form> 

     <div id="forgotyourpassword"> 
     <a href="somelink.com">Forgot your password?</a> 
     </div> 
    </div> 
</div> 

然後就是簡單地調整頁邊距爲forgotyourpassword DIV的問題：

#forgotyourpassword{ 
    float: left; 
    margin-top: 10px; 
} 

這是最好的解決方案，我可以想出現在因爲包裝div不會爲文檔添加任何文字值，但我認爲不會有簡單的解決方案，否則（直到我們可以在CSS中使用數學和獲取元素的大小）。

Answer 2

#content form{ 
    position: absolute; 
    top: 80px; 
    right: 0px; 
} 
#forgot-password{ 
    height:80px; 
} 

如果你嘗試這樣的事情，你採取的形式進行流動，而該鏈接就會出現在它上面沒有任何微調。一旦#content表單的最高值和＃忘記密碼的高度值匹配，您應該像房屋一樣安全。

在某些情況下，您可能在清除絕對定位的div時遇到問題，但是您說您正在爲#content設置高度，所以這不應該成爲問題。