Question

我需要在列中证明3个菜单单词：单词的长度不同但我需要它们占据垂直div的100％（就像对齐）。我尝试过使用对齐的文本对齐以及为每个单词使用一个段落，并为每个单词设置不同的字母间距但没有任何结果。我希望能够很好地解释问题以及我尝试过的解决方案感谢＆＃39; S

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是一个例子。然后你可以通过另一个功能

来解决这个问题

Html证明了div中的一个单词

1 个答案: