HTML中的<a>标签在使用position: relative时会将元素向下推。

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 我不知道有什么好的解决方案。我需要去掉按钮标记之间的空隙。当我尝试将.formSubmit元素应用position:absolute时，它会从窗口的左上角对齐，这会在不同的分辨率下出现问题。我还尝试过对表单应用position:relative，但结果也一样。

感谢任何帮助。

- Will

---

为什么不将input和a样式设置为display: inline，然后使用a {margin-left: -4em; }（或类似的样式）呢？ - David Thomas

Answer 1

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

另外，你可以使用 JavaScript 获取输入框相对于文档的位置，以便定位相同。

Position: Absolute

http://jsfiddle.net/73MTd/

Position: Relative

http://jsfiddle.net/YM9SB/

- Robert

---

有没有办法让它相对于表单元素定位？ - Will

如果您想通过这种方式实现，那么您可以尝试调整CSS的margin、display或其他元素的位置。 - Robert

@Will：根据您的要求，已经添加了position: relative的解决方案。 - Robert

Answer 2

没事了，我自己解决了。

我在表单周围放了一个叫做 aligner 的 DIV，并将其设置为 position: relative，然后我就能够正确地在 <a> 元素上使用 position: absolute。

谢谢大家。

- Will

Answer 3

只是为了记录另一种解决方案：您不需要使用绝对或相对定位来实现您想要的效果。在锚点上使用"display:block"和负的margin-top将解决您的问题。这里是基于Robert示例的第三个解决方案：

顶部边距： http://jsfiddle.net/xf2U4/

- InvisibleBacon