2011-01-05 45 views
1

晚上好球员,围绕一个特定的DIV - 已经尝试了很多 - 未能不断

这是我第一次这个网站上,所以我很抱歉,如果我这样做实在太差了。

首先,我有一个专门用于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; 

回答

0

我认为你的问题是关系到你的字体:

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

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

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

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

尝试黑体宋体,而不是影响和改变你的字母间距2.0px或类似的东西。

0

在任何浏览器,甚至IE6中,我都看不到“两排”问题。

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

只需上传您所需的字体,下载套件&遵循超级简单的说明(^_^)