Question

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

这就是它到目前为止找我的方式 Test pic

这是我的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>

和我的css

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

我也有一个关于Nav Bars令我困惑的事情的一般性问题。我应该设置哪些元素来设置每个属性？正如您所看到的那样，我在Anchor元素上指定了字体系列和字体大小，而我在Nav元素上有容器大小，而在list元素中显示：inline。这对我来说非常混乱，我当然确定它会成为一些错误的根源。我的教授坚持要求我使用所有这些元素用于导航条btw（导航，内嵌UL嵌套，嵌套在列表中的锚点）

Answer 1

因此，我从nav.NavBar和div.wrapperHeader移除了宽度，以便通过插入{{1}将nav.NavBar放在与徽标相同的行上时不会出现问题}。此插入代码基本上将.wrapperHeader > * { display: inline-block; }应用于所有display: inline-block子元素。

我已经清理了一下你的css代码，请看下面的内容：

codepen link

链接未在导航栏

1 个答案: