0

这是网站 --> http://ridgelandbaptist.radiantwebtools.com/

这个屏幕截图，带有评论几乎总结了这个问题 - > http://screencast.com/t/R4evQe4pq

占用 2 行的导航项占用的空间超出了我的预期。我希望单词和白条之间有 20px 的空间。对于 2 行或更多的导航项，它们占用了更多空间。

这是提供填充的选择器。

 #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 可供我使用。

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

谢谢你。

4

3 回答 3

1

在 上#template .header .navigation-module .horizontal ul.menu > li > a，添加这个 css：

width: 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 行时，它正在扩展到 100 像素的 LI 的最大宽度。在 A 上将宽度设置为 1px，它将吸出所有额外的空间。

于 2013-09-15T01:12:57.523 回答
0

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

或者你做得更宽，或者你降低到 1.8em（我在检查器中尝试）以降低所有菜单字体。

所以如果你想要两行，就是文本对齐的问题。

于 2013-09-15T01:02:03.813 回答
0

如果您希望根据文本宽度 + 填充来调整宽度，请尝试white-space: nowrap在您的导航项目上使用。

于 2013-09-15T00:57:23.503 回答