HTML 布局，菜单文字间距错误，无法居中对齐答案

【问题标题】：HTML Layout, menu wordings spacing error and cannot justify to the centreHTML 布局，菜单文字间距错误，无法居中对齐
【发布时间】：2013-05-20 15:03:38
【问题描述】：

我已经制作了一个 html，并且顶部栏上有一个菜单。

http://i1127.photobucket.com/albums/l622/sugarboylovephoto/ScreenShot2013-05-20at24031PM_zps2dd74d4d.png

[URL=http://s1127.photobucket.com/user/sugarboylovephoto/media/ScreenShot2013-05-20at24031PM_zps2dd74d4d.png.html][IMG]http://i1127.photobucket.com/albums/l622/sugarboylovephoto /ScreenShot2013-05-20at24031PM_zps2dd74d4d.png[/IMG][/URL]

单词之间的间距太宽。比如“学理科”，现在学理和理科之间的空间太宽了。如何减少空间？请看附件
如何移动菜单文字的中心和灰色条的顶部？

这里是菜单栏的代码

<div id="header">
        <div class="head-padding"></div>
        <div id="head"><img src="images/head01.png" width="1010" height="106"></div>
        <div id="nav" class="navbgimg"> 
            <a href="#about">About</a>
            <a href="#studying">Studying Science</a>
            <a href="#SSCI">About SSCI</a> 
            <a href="#highlights">Programme Highlights </a> 
            <a href="#life">Student Life</a> 
            <a href="#fun">Fun Fact</a> 
            <a href="#tips">Interview Tips</a>  </div>
            <div id="headwhite"><img src="images/head02.png" width="1010" height="20"></div>

        </div>

这是菜单栏的css

*{ margin: 0 auto;}


h1 {
    font-family: "source-sans-pro";
    font-size: 8pt;
}

body {
    background:#2848ad; 
    margin: 0 auto; 
    font-family: "source-sans-pro",sans-serif;
    height:6078px;
}

copyright {
    margin: 0 auto; 
    font-family:"source-sans-pro"; 
    font-size: 6pt;
}


#header {
    position:fixed;
    z-index:1;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    height:160px; 
    width:100%;
}

#head {
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    background:#204ab4; 
    height:106px; 
    width:1010px;
}

.navbgimg {
    background-image: url(../images/menubar01.png);
    margin-left:auto;
    margin-right:auto;
    width:1010px;
    height:34px; 
}

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 11pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    height:34px; 
    width:1010px;
    word-spacing:20px;
}

#headwhite {
    margin-left:auto;
    margin-right:auto;
    height:20px; 
    width:1010px;
}

#page1 {
    position:relative;
    top:150px;
    height:390px;
    width:1010px;
    background:#00c9e5;
}

【问题讨论】：

你能把你的代码放到www.jsfiddle.net吗？

标签： css html

【解决方案1】：

因为你使用“字间距”

word-spacing:20px;

在#nav中

如果我是你，我会这样做：

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 11pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    height:34px; 
    width:1010px;
    text-align: center   <---------------- require this to center the menu

}

#nav a { padding-right: 20px; display:inline-block; }

编辑

更新上述代码以支持居中菜单

【讨论】：

还有一件事，希望对您有所帮助。菜单文字太接近蓝色线。我怎样才能向下移动它，所以它应该在灰色条的顶部垂直对齐。
尝试在#nav 或#nav a 中添加填充，这样您就有了更多空间。抱歉，我想更具体一些，但我将代码复制并粘贴到我的示例页面，但因为我没有任何图像，所以它都是蓝色的。

【解决方案2】：

word-spacing:20px;

这是你的罪魁祸首。您将不得不创建一个较小的跨度并将“学习科学”的字间距重置为正常，或者您将不得不一起摆脱它并为个人使用“边距”或“填充”值#nav 一个项目。（为简单起见，我会这样做。）

至于菜单移动中心和灰色条上方，您可能想要远离绝对定位或将左侧边距从自动更改为屏幕边缘与绿色之间的距离酒吧。

（也可以添加#nav a {display: inline-block; text-align: center;}）

【讨论】：

【解决方案3】：

问题 1

为了增加/减少导航栏中每个单独菜单项之间的间距，您可以使用以下 CSS 并更改 px 数以获得所需的效果。

padding-left: 15px; padding-right: 15px;

问题 2

另外，如果你使用 CSS

display: inline-block;

然后该元素被放置为内联元素（与相邻内容在同一行），但它表现为块元素。这将整理您的导航栏放置。

【讨论】：