1

我正在尝试创建一个信息标签，该标签挂在页面上的块元素上，但在定位正确时遇到了一些麻烦。要了解我正在尝试做什么，请参阅附图。内容块实际上是页面上的右侧列。

在此处输入图像描述

<div class="contentblock">
  <span class="tag">tag</span>
</div>

div.contentblock{
  width: 575px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  min-height: 300px;
  display: block;
  position: relative;
  padding: 15px;
  ...
}

span.tag{
  font-size: 14px;
  margin-left: 495px;
  color: rgba(65,65,66,0.6);
  display: inline-block;
  text-align: center;
  text-transform: lowercase;
  position: absolute;
  margin-top: 115px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  background: #fff;
  margin-bottom: -145px;
  min-width: 60px;
  width: auto !important;
  white-space: nowrap;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  border: 2px solid rgba(65,65,66,0.5);
  border-bottom: 0;
}

这种工作 - 附加的图像实际上是这样的结果，但它不能很好地工作，因为标签的水平放置似乎受到标签长度的影响。右侧较长的文本<span pushes>（它也会垂直向下扩展 - 应该如此）。因此，标签元素上的半任意边距 - 恰好适用于一个特定的文本字符串。

我想我会以错误的方式解决这个问题。什么是更有效的方法来实现这一目标？

4

2 回答 2

1

由于您没有指定变换原点，因此它默认为元素的中间。结果，改变文本的数量会偏移中间并导致变换发生变化。

您应该为固定的东西指定一个transform-origin（和所有供应商扩展），例如左上角，然后基于它定位。

请注意，这-ms-transform也是完美的功能。

于 2012-09-05T22:28:57.093 回答
0

与其使用边距来定位标签，不如尝试将其 'right' 属性设置为负数。例如，对：-10px。这将使标签的右边缘位于块右边缘的右侧 10px 处。

于 2012-09-05T22:27:53.993 回答