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

Question

我已经制作了一个 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]

1. 单词之间的间距太宽。比如“学理科”，现在学理和理科的空间太宽了。如何减少空间？请参阅附件

2. 如何移动菜单文字的中心和灰色条的顶部？

这是菜单栏的代码

<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;
}

Answer 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; }

编辑

更新了上面的代码以支持居中菜单

Answer 2

word-spacing:20px; 

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

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

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

Answer 3

问题 1

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

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

问题 2

此外，如果您使用 CSS

display: inline-block;

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