javascript - 均匀分布旋转文本

Question

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

 .menuItem {
   text-align: right;
   margin-top: 3vh;
   list-style-type: none;
   display:inline-block;
  }

  .menuButton{
      text-align: right;
      background:none;
      padding: 0;
      border:none;
      -webkit-transform: rotate(310deg);
      -moz-transform: rotate(310deg);
      -ms-transform: rotate(310deg);
      -o-transform: rotate(310deg);
      transform: rotate(310deg);
      -webkit-transform-origin:100%;
      -moz-transform-origin:100%;
      -ms-transform-origin:100%;
      -o-transform-origin:100%;
      transform-origin:100% ;
  }

      <ul class="menu">
        <li class="menuItem">
          <button class="menuButton" id="newsButton">Button</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="aboutButton">LoooooooongButton</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="contactsButton">ShortButton</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="otherStuffButton">LoooooooooooooongestButton</button>
        </li>

      </ul>

我已经设法旋转每个按钮，右对齐文本，并将它们水平放置，我面临的唯一问题是我无法均匀分布文本，因为文本较长的按钮与短文本相比，他们离左 sibling 的距离更远。 这个问题的最佳解决方案是什么？ 谢谢大家。

更新

我刚刚通过 javascript 编写了一个简单的脚本，它获取容器宽度并均匀分布按钮:

var menuWidth = $('.menu').width();
var elements = document.querySelectorAll(".menuItem");
for (var element of elements){
    let ind = $(element).index();
    $(element).css("left", $(element).height()-$(element).width()+(menuWidth/(elements.length))*ind);
}

显然，这里的技巧是将 position: absolute 分配给所有菜单项，并将 position: relative 分配给菜单。 谢谢大家 ;)

Answer 1

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

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

有点像这样:

.menu {
  display: flex;
  margin: 4em;
}
.menuItem {
  text-align: right;
  list-style-type: none;
  transform-origin: right center;
  transform: rotate(310deg);
  flex: 0 0 1.2em;
  height: 1.4em;
  position: relative;
  background: pink;
}
.menuButton {
  background: none;
  padding: 0;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
}

<ul class="menu">
  <li class="menuItem">
    <button class="menuButton" id="newsButton">Button</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="aboutButton">LoooooooongButton</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="contactsButton">ShortButton</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="otherStuffButton">LoooooooooooooongestButton</button>
  </li>

</ul>

现在这有缺点，因为 li 的大小没有动态大小，但我将其留在这里作为一般指南。