我需要有一个用于激活下拉菜单的按钮，以及一个在其中具有链接的div，在导航栏中，该按钮和链接在其下方具有名称和一小行文本。我希望一小段文字是较小的字体。如果将一行文本放在p标记中并指定较小的字体，则无法使文本整齐地对齐它们。
我可以在链接上使用填充来将其下推，但是当我开始使用媒体查询来缩小尺寸时，它们就无法对齐。我也尝试过使用线高，但是有类似的问题。我可以通过所有媒体查询来略微调整填充/行高以获取对齐，但是显然这不能解决问题，只是创建一个混乱的解决方案。
如果我删除了一行文字的字体大小，它们将正确对齐。有人可以帮我理解为什么使用不同字体大小会导致按钮和div中文本的对齐方式发生不同的变化并提出解决方案的原因，并提出解决方案，以便在我调整其他属性（例如两者的高度）的大小时轻松一致地对齐。谢谢
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
line-height: 3pt;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
width:120px;
top:25px;
line-height: 3pt;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
}<html>
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>