html - 随着文本长度的增加，垂直徽章偏离边缘

Question

我正在尝试使垂直“徽章”与浏览器的左/右边缘对齐。我目前的做法是制作一个div，然后旋转90度，然后使用position: fixed;左:0； top: 20% 以正确放置它，但是我遇到了以下问题:

随着文本变长，小部件将与浏览器的左右边缘“分离”。

演示:http://jsfiddle.net/bv3no599/ (查看徽章如何随着更长的文本进一步偏离)

当前代码:

<div id="badge-outer-2" style="background: #1508bc;color:#FFFFFF;position: fixed;border-top-right-radius: 5px; border-top-left-radius: 5px;transform:rotate(90deg);top: 50%;padding:8px;font-size:13px;box-shadow:0px 0px 4px rgba(0,0,0,0.4);z-index:99996;cursor:pointer; left: -50px">Not OK when the text is longer and longer</div>

谁能指出我这个问题的解决方案？为什么在增加文本长度后它会远离边缘？

谢谢。

Answer 1

元素的旋转默认基于其中心。只需使用 transform: rotate(90deg) 即可将其围绕其中心轴旋转 90 度。这会导致不同尺寸元素的边缘最终出现在不同的位置。

相反，尝试围绕左下角旋转:

transform-origin: 0 100%;

现在这两个元素都将靠近屏幕的左边缘，无论它们有多高，但是您的硬编码 left 偏移量有点困惑。相反，只需将它们放在 left: 0; 以始终将它们粘在屏幕的左侧。这样您也不必为每个元素设置新的偏移量。

jsFiddle