gleichmäßig gedrehten Text verteilen

Question

Ich möchte ein horizontales Menü mit gedrehten Text erstellen (sagen wir -50deg). Mein Code sieht wie folgt:

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

ich bereits geschafft haben, jede Taste zu drehen, nach rechts auszurichten, den Text, und sie horizontal gelegt, das einzige Problem, das ich Gesicht ist, dass Ich kann es nicht schaffen, den Text gleichmäßig zu verteilen, da die Schaltflächen mit längerem Text von ihren linken Geschwistern weiter entfernt sind als die mit einem kurzen Text. Was ist die beste Lösung für dieses Problem? Danke euch allen.

UPDATE

Ich habe ein einfaches Skript durch Javascript nur geschrieben, die die Behälterbreite und gleichmäßig verteilt die Tasten bekommt: hier

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

Offensichtlich Der Trick ist, Position: absolut allen Menüpunkten und Position zuweisen: relativ zum Menü. Vielen Dank alle, Jungs;)

Answer 1

Dies ist ziemlich schwierig, weil eine Transformation ist ein rein visueller Effekt und hat keinen Einfluss auf die tatsächliche Position der Elemente.

Im Allgemeinen ist eine Lösung, das Element wie gewünscht zu dimensionieren und den Inhalt absolut zu positionieren.

Art wie folgt aus:

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

dies nun Nachteile wie die Größe des li hat keine dynamische Größe, aber ich lasse dies hier als Leitfaden.