相对位元件

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设置高度，所以这不应该成为问题。