Javascript 均匀分布旋转的文本

我想创建一个带有旋转文本（比如-50度）的水平菜单。 我的代码如下所示：

.menuItem{
文本对齐：右对齐；
边际上限：3vh；
列表样式类型：无；
显示：内联块；
}
menuButton先生{
文本对齐：右对齐；
背景：无；
填充：0；
边界：无；
-webkit变换：旋转（310度）；
-moz变换：旋转（310度）；
-ms变换：旋转（310度）；
-o变换：旋转（310度）；
变换：旋转（310度）；
-webkit转换来源：100%；
-moz变换原点：100%；
-ms转换起点：100%；
-o-变换原点：100%；
变换原点：100%；
}

按钮


looooongbutton


快捷键


looooooogest按钮

这非常棘手，因为变换是纯粹的视觉效果，不会影响元素的实际位置

通常，一种解决方案是根据需要调整元素的大小，并绝对定位内容

有点像这样：

菜单{
显示器：flex；
保证金：4em；
}
梅努特姆先生{
文本对齐：右对齐；
列表样式类型：无；
变换原点：右中心；
变换：旋转（310度）；
弯曲度：0.1.2米；
高度：1.4em；
位置：相对位置；
背景：粉红色；
}
menuButton先生{
背景：无；
填充：0；
边界：无；
位置：绝对位置；
排名：0；
右：0；
}

按钮


looooongbutton


快捷键


looooooogest按钮

它们是动态创建的吗？因为如果这不是一个要求，您可以根据需要轻松地使用IDs进行调整。否则，它就要复杂得多。不，它们不是，你建议给所有菜单元素指定position:absolute，然后手动给它们左位置吗？在这种情况下，是的。我肯定会建议你这样做，因为这样会省去很多头痛。谢谢你，是的，我意识到问题是，我花了整个下午的时间想办法解决它：D