Javascript 为什么我的链接处于不同的高度？

我有一个包含链接的页面，以内联块的形式，指向几个页面。我的链接保持在相同的高度，只要它们有相同的文本。像这样：

但是，当我更改框中的文本时，字符数较少的框比另一个框低。像这样：

有人能告诉我为什么会发生这种情况，以及如何解决它吗

以下是我的HTML、CSS和JavaScript：

//JavaScript可能不相关，但可能不相关
//按宽度的比例设置菜单块高度
var menuAWidth=$（'.menu a'）.css（'width'）；
menuAWidth=menuAWidth.substring（0，menuAWidth.length-2）；
var menuAHeight=menuAWidth*1.618；
menuAHeight=（数学圆整（menuAHeight*1000））/1000；
$（'.menu a'）.css（'height'，menuAHeight）；
//调整大小时重置菜单块的高度
$（窗口）。调整大小（函数（）{
var menuAWidth=$（'.menu a'）.css（'width'）；
menuAWidth=menuAWidth.substring（0，menuAWidth.length-2）；
var menuAHeight=menuAWidth*1.618；
menuAHeight=（数学圆整（menuAHeight*1000））/1000；
$（'.menu a'）.css（'height'，menuAHeight）；
});
正文{
背景：fffae5；
字体系列：无衬线；
保证金：0；
}
梅因先生{
左边距：300px；
左：1%；
}
.主氢{
文本对齐：居中；
字体大小：30px；
}
/*任何与边栏、导航或标题相关的代码都是无关的*/
#边栏{
位置：固定；
排名：0；
左：0；
浮动：左；
宽度：300px；
字体大小：20px；
背景：#D2B48C；
左边距：0；
边际上限：0；
身高：100%；
}
#标题{
背景：#a52a2a；
填充物：5px；
文本对齐：居中；
字体系列：衬线；
}
#品目h1{
字体大小：30px；
}
导航{
线高：35px；
文本对齐：居中；
}
导航ul{
列表样式：无；
保证金：0；
}
李国荣，
导航ul{
左侧填充：0；
}
#边栏a{
颜色：#000；
文字装饰：无；
}
/*这是相关代码*/
.菜单a{
颜色：#000；
文字装饰：无；
显示：内联块；
宽度：21%；
背景：#9E7D70；
填充物：5px；
利润率：1%；
边界半径：10px；
}
.菜单h3{
文本对齐：居中；
填充：0 16px 0 16px；
}
.菜单p{
填充：0 16px 0 16px；
}
/*也无关*/
导航a[href=“vocab.html”]li{
背景：#000；
颜色：#fff；
}
导航a[href=“../vocab.html”]li{
背景：#000；
颜色：#fff；
}

教书的人


词汇
显示：内联块

导致此行为。这里有大量关于这方面的信息：

简短回答：在内联块元素上使用

vertical align:top

，以保持顶部对齐（而不是坚持基线默认值），或者尝试浮动