HTML 在 div 中对齐一个词

Question

我需要在一列中对齐 3 个菜单词:词的长度不同但我需要它们占据垂直 div 的 100%(如对齐)。我试过使用合理的文本对齐以及为每个单词使用一个段落并为每个单词设置不同的字母间距但没有任何结果。我希望能很好地解释问题和我尝试过的解决方案。
谢谢

HTML:

<div class="container vert" id="left">
 <div class="container" id="menu">
 <a href=""><p class="menuitem" id="works">works</p> </a>  <br>
 <a href=""> <p class="menuitem" id="contacts">contacts </p> </a> <br>
 <a href=""> <p class="menuitem" id="share">share </p> </a> <br>
 </div>`
</div>

CSS:

#left {
float: left;
border: 1px solid red;
width: 20%;
opacity: 0.7;
}


#menu {
word-wrap: break-word;
left: auto;
height: auto;
font-family: 'PT Sans', 'sans-serif';
letter-spacing: 16px;
font-size: 18pt;
color: #4D4D4D;
text-align: center;
}

.menuitem{
margin: 0;
width: 100%;
}

Answer 1

您必须取回菜单的大小。有点像

var widthMenu1 = $('#idMenu1').width();

然后根据你得到的宽度调整文本的大小，

$('#idMenu1Label').attr('font-size', widthMenu1/10);

10 就是一个例子。然后你可以用另一个函数来证明这一点