1

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

我想在变量居中的 div 之前放置一个箭头，但我必须定义偏移量（左：-20px;）。

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

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

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;
}

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

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

谢谢 ！

4

1 回答 1

3

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属性即可看到它的变化。）

于 2013-09-04T09:16:13.197 回答