1

各位晚安，

这是我第一次在这个网站上，所以如果我这样做真的很糟糕，我很抱歉。

首先，我有一个专为 wordpress 使用而设计的网站，我遇到的问题是我希望顶部的水平导航看起来像某种方式，但如果我让它保持现在的样子，它似乎降到第二排……这让我很难过。

因此，我决定将单个按钮变小，然后将它们居中，这样即使查看器没有我正在使用的字体（即 IMPACT），它也会调整它们的方式居中，而不是下降。

我试图找到一种方法来为 DAYS 做到这一点，但我一再失败。我在 firefox 中使用“firebug”来测试代码更改，但我找不到一种方法来完成这项工作。

该网页是http://www.crapcast.com，代码只是页面顶部，在徽标下方。我将包括当前的 CSS，它的格式是为了满足页面的当前使用情况（但同样，在一些较旧的浏览器和手机浏览器上往往会显示双行）。

#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;
4

2 回答 2

0

我认为您的问题与您的字体有关：

#navigation ul {
  font-family:Impact,Charcoal,Times New Roman;
  ...
}
...
...
#navigation li a {
  ...
  letter-spacing:2.45px;
  ...
}

您正在使用字体的宽度来设置菜单中项目的宽度。因此，当系统中没有 Impact 字体时，项目的宽度会增加很多。Impact 字体的每个字符的宽度与您放置的其他字符相比要窄一些。

如果您尝试使用等宽字体，我相信您会解决您的问题。

在 iPhone，我猜是 Android 中，你找不到 Impact 字体。

尝试Helvetica，Arial而不是 Impact 并将您的字母间距更改为2.0px或类似的东西。

于 2011-01-05T09:59:29.533 回答
0

我在任何浏览器中都看不到“两行”问题，即使是 IE6。

如果想确保您的访问者能够查看您正在使用的确切字体......可能是 Impact 或任何类型的花哨字体。尝试使用http://www.fontsquirrel.com/fontface/generator。

只需上传您想要的字体，下载工具包并按照非常简单的说明进行操作 (^_^)

于 2011-01-05T10:06:31.293 回答