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

晚上好，

这是我第一次访问此网站，如果真的做得不好，我深表歉意。

首先，我有一个设计用于wordpress的网站，我遇到的问题是我希望顶部的水平导航看起来有某种方式，但是如果我按现在的方式进行操作，似乎下降到第二行...这让我很难过。

因此，我决定将各个按钮缩小，然后再将它们按CENTER键，这样即使观众没有我正在使用的按钮（即IMPACT），它也将调整它们的使用方式居中，而不是下降。

我试图找到一种在DAYS进行此操作的方法，但我屡次失败。我在firefox中使用“ firebug”来测试代码更改，但我只是找不到一种方法来完成这项工作。

网页为http://www.crapcast.com，代码仅位于页面顶部徽标下方。我将包括当前的CSS，该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;

最佳答案

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

#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或类似的值。

关于css - 以特定DIV为中心-尝试了很多-不断失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4602318/