html - 如何定义绝对定位元素的 anchor ？

Question

是否可以在没有 CSS 转换的情况下定义定位元素的 anchor ？

我想在变量居中的 div 之前放置一个箭头，但我必须定义偏移量(左:-20px；)。

如果我要增加字体大小，箭头和 block 之间的间隙将不再成比例。

如何将我的绝对定位元素的 anchor 定义为右上角而不是左上角？

HTML:

<div id="block">
   back
   <div id="arrow">&larr;</div>
</div>

CSS:

#block {
   height: 20px;
   width : 40px;
   margin: 0 auto;
   border: 1px solid black;
   position: relative;
}

#arrow {
   position: absolute;
   left: -20px;
   top : 0;
}

在这个例子中， block 的宽度是固定的，但在我的代码中它是可变的。可能需要不同的解决方案。

http://jsfiddle.net/J7XnB/1/

谢谢!

Answer 1

您可以使用 em 作为测量单位而不是绝对像素来实现此目的:

#block {
    font-size: 16px;
    height: 1em;
    width: 2.5em;
    margin: 0 auto;
    border: 1px solid black;
    position: relative;
}

#arrow {
    position: absolute;
    left: -1em;
    top: 0;
}

使用 em 测量 #block 的高度和宽度还有一个额外的好处，即如果字体大小发生变化，则框会调整大小以适合文本相应地。

你可以看到它在这里工作:http://jsfiddle.net/J7XnB/2/

(只需更改 font-size 属性即可看到它的变化。)