Html 导航栏中的链接未正确对齐_Html_Css

Html 导航栏中的链接未正确对齐

html css

Html 导航栏中的链接未正确对齐,html,css,Html,Css,我目前正在做一个班级项目，我们需要从psd文件创建一个网站。到目前为止，我在导航栏，但我遇到了问题，因为导航栏中的最后两个链接位于前两个元素的下方，而不是显示在一行中。从徽标到最后一个链接的整个顶部都包裹在一个940px宽的容器中。链接中的字母必须为20px。这就是网站的外观到目前为止，它就是这样找我的这是我的HTML <html> <head> <meta charset="utf-8"> <title&g

我目前正在做一个班级项目，我们需要从psd文件创建一个网站。到目前为止，我在导航栏，但我遇到了问题，因为导航栏中的最后两个链接位于前两个元素的下方，而不是显示在一行中。从徽标到最后一个链接的整个顶部都包裹在一个940px宽的容器中。链接中的字母必须为20px。这就是网站的外观

到目前为止，它就是这样找我的

这是我的HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>NeoDance Studio</title>
        <link rel="stylesheet" href="css/stylesheet.css">

    </head>

    <body>
        <header class="Top">
            <div class="wrapperHeader">
            <img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">

            <nav class="NavBar">
                <ul class="links">
                    <li class="links"><a href="" class="links">Home</a></li>
                    <li class="links"><a href="" class="links">About</a></li>
                    <li class="links"><a href="" class="links">Class schedules</a></li>
                    <li class="links"><a href="" class="links">Performances</a></li>
                    <li class="links"><a href="" class="links">Blog</a></li>
                    <li class="links"><a href="" class="links">Contact</a></li>
                </ul>
            </nav>
            <div class="ClearFix"></div>
            </div>    

        </header>

我还有一个关于导航条的一般性问题让我困惑。我应该设置哪些元素的样式来设置每个属性？例如，您可以看到，我在锚元素上指定了字体系列和字体大小，而在Nav元素上指定了容器大小，在list元素中指定了display:inline。这对我来说是非常混乱的，我肯定这将是一些错误的来源。我的教授坚持让我把所有这些元素都用在导航栏上，顺便说一句（导航，里面嵌套了UL，列表中嵌套了锚）

因此，我删除了

nav.NavBar

和

div.wrapperHeader

的宽度，以便在将

nav.NavBar

插入

.wrapperHeader>*{display:inline block；}

时不会出现问题。此插入代码基本上将

display:inline block

应用于所有

.wrapperHeader

的子元素

我已经清理了您的css代码，请参见以下内容：

感谢您的修复，唉，虽然它确实帮助解决了导航栏问题，但现在却导致徽标失去对齐。此外，站点必须具有940px包装

header.Top{
    margin: auto;
    background-color: #303030;
    overflow: hidden;
}    

div.wrapperHeader{
    width: 940px;
}



}

div.wrapper{
    width: 940px;
    margin: auto;
    background-color: #f6f6f6;
    overflow: hidden;
}

img.logo{


    margin: auto;
    margin-top: 35px;
    margin-bottom: 35px;
    margin-left: 10px;
    background-color: #303030;



}

nav.NavBar{
    float: right;
    width: 480px;
    background-color: #303030;
    list-style: none;
    margin: auto;
    font-size: 20px;
    margin-top: 50px;
    margin-bottom: 30px

}

ul.links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;



}

li.links{
    display: inline;
}

a.links{

    font-size: 20px;
    font-family: 'Muli', sans-serif;
    color: #8c8c8c;
    margin-right: 18px;
    text-decoration: none;


}

a:hover {
    background-color: #555;
    color: white;
}