Question

晚上好人，

这是我第一次访问本网站，所以如果我真的这么做，我会道歉。

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

所以我已经决定将单个按钮缩小，然后将它们设置为CENTER，这样即使观众没有使用（我是使用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;

Answer 1

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

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

您正在使用字体的宽度来设置菜单中项目的宽度。因此，当系统中没有Impact字体时，项目的宽度会增加很多。与你放在那里的其他字符相比，Impact字体的每个字符的宽度都是缩小的。

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

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

尝试 Helvetica ， Arial 而非影响，并将字母间距更改为 2.0px 或类似名称这一点。

Answer 2

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

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

只需上传您想要的字体，下载套件＆amp;按照超级简单的说明（^ _ ^）

以特定的DIV为中心 - 尝试了很多 - 不断失败

2 个答案: