Html 两个单词导航项不正确，CSS解决方案？

这里是网站-->

这个带有评论的屏幕截图大致概括了这个问题-->

占2行的导航项目占用的空间比我想要的要多。我想有一个20像素的空间之间的字和白色的酒吧。使用两行或更多行的导航项，它们会占用更多空间

下面是提供填充的选择器

 #template .header .navigation-module .horizontal ul.menu > li > a {
     height: 124px;
     border-right: 1px solid white;
     padding: 0 20px;
     display: table-cell;
     vertical-align: bottom;
}

我无法更改标记。这里只有CSS供我使用

在此将不胜感激。让我知道我是否可以提供任何额外的信息

---

谢谢。

如果希望根据文本宽度+填充调整宽度，请尝试在导航项目上使用

空白：nowrap

。

是字体的大小。“a”标记中的字体可能没有大小

或者你把它放得更宽，或者你降低到1.8em（我在inspector中尝试）来降低所有的菜单字体

因此，如果需要两行，文本是否对齐是问题所在。

在

#template.header.navigation module.horizontal ul.menu>li>a

上，添加以下css：

宽度：1px

使您的CSS成为：

#template .header .navigation-module .horizontal ul.menu > li > a {
    height: 124px;
    border-right: 1px solid white;
    padding: 0 20px;
    display: table-cell;
    vertical-align: bottom;
    width: 1px;
}

当您的跨度断开为2行时，它将扩展到最大宽度为100px的LI。将A上的宽度设置为1px，它将吸出所有多余的空间。
值得一提的是，我认为如果去掉导航项目的“最大宽度”属性，它看起来非常不错。至少在Chrome上。我很感激你的回应。谢谢，不用担心。如果我的答案有效，请不要忘记勾选“接受：）