Question

我想创建一个带有旋转文本的水平菜单（让我们说-50deg）。我的代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

我已经设法旋转每个按钮，右对齐文本，并将它们放在水平，我面临的唯一问题是我无法均匀分配文本，因为文本较长的按钮与其文字较短的文本相比，左边的兄弟会更快。这个问题的最佳解决方案是什么？谢谢大家。

更新

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

＆＃13;

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

＆＃13;

显然，这里的技巧是为所有菜单项和位置分配位置：绝对：相对于菜单。谢谢大家，伙计们;）

Answer 1

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

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

有点像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

均匀分发旋转的文字

1 个答案: