Question

我有一个带有样式输入框和<a>标记的表单，其作用类似于表单提交按钮。我不想要一个真正的表单按钮，因为我将在此表单上执行AJAX。

这是标记：

<form action="" method="post">
    <input type="text" id="videoLink" />
    <a href="#" class="formSubmit">Go</a>
</form>
<div class="contentTop"></div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit nisi at elit elementum vitae condimentum felis aliquam. Aliquam vitae orci quis odio semper rhoncus id ut leo. Nullam laoreet semper tortor, vitae viverra est aliquam eu.</p>
</div>
<div class="contentBottom"></div>

这是应用于相关标记的样式：

#videoLink {
    background: url('images/inputBackground.png') no-repeat;
    width: 641px;
    height: 29px;
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
}

.formSubmit {
    display: block;
    text-indent: -9999px;
    background: url('images/formSubmit.png') no-repeat;
    width: 65px;
    height: 30px;
    position: relative;
    top: -35px;
    right: -590px;
    outline: none;
}

.formSubmit:hover {
    background: url('images/formSubmitHover.png') no-repeat;
}

.formSubmit:active {
    background: url('images/formSubmitPressed.png') no-repeat;
}

问题是，我发生了这种情况：

http://imgur.com/OUT3v.jpg

我不知道一个好的解决方案。我需要那个按钮标记即将消失的空白。当我尝试将position: absolute应用于.formSubmit元素时，它会从窗口的左上角对齐它，这将在不同的分辨率中将其弄乱。我也尝试过将position: relative应用于表单，但它只是做了同样的事情。

感谢任何帮助，谢谢。

Answer 1

这样做是因为这是它应该做的事情，position: relative根据它的当前位置修改它的位置，但它仍然“在”文档的上下文中。您必须使用position: absolute;或将margin修改为负值，直到获得所需的效果。

作为旁注，您可以使用javascript来获取输入框相对于文档的位置，以使其位置相同。

职位：绝对

http://jsfiddle.net/73MTd/

职位：相对

http://jsfiddle.net/YM9SB/

Answer 2

没关系，自己设法修理它。

我为我的表单aligner添加了另一个DIV，然后将其设置为position: relative，然后我就可以在position: absolute元素上正确使用<a>。

谢谢大家。

Answer 3

仅记录另一种解决方案：您不需要使用绝对或相对定位来实现您想要的效果。 “display：block”和锚点上的负边距顶部将解决您的问题。这是基于Robert的例子的第三个解决方案：

最高保证金： http://jsfiddle.net/xf2U4/

HTML <a> tag is pushing elements down the page when using position: relative</a>

3 个答案:

职位：绝对

职位：相对