2

我正在尝试使用 HTML 和 CSS 在某些表单字段的右侧添加一个标注气泡。我不希望标注影响任何其他布局,所以我已经将它绝对定位,但我想以某种方式将它定位在另一个元素右侧一定距离处。

这基本上就是我所拥有的:

<ul>
    <dt><label>...</label></dt>
    <dd>
        <input ...>
        <span class='callout'>Helpful tip about this field</span>
    </dd>
</ul>

和:

.callout {
    position: absolute;
}

所以我想要.callout布局流程之外(因此position:absolute,但我希望它位于与之关联的输入字段的右侧(当然,事先不知道字段的宽度)。

有任何想法吗?

4

1 回答 1

5

您将要绝对相对于您的元素定位它。因此,将您的容器设置为位置:相对,并将您的标注设置为位置:绝对。Top/left 然后成为父元素的左上角。说得通?

这里有一个小提琴来说明这个概念:

http://jsfiddle.net/tNCDK/

HTML:

<div id="parent">
    <div id="child"></div>
</div>

CSS:

#parent { 
  position: relative;
  border: solid 1px #000; 
  width: 200px; 
  height: 200px; 
}

#child { 
  position: absolute;
  top: 10px;
  right: -50px;
  border: solid 1px #000; 
  width: 50px; 
  height: 50px; 
}

​​</p>

于 2012-05-08T19:56:42.963 回答