Question

嘿那里我试图让我的页眉导航菜单堆叠在我的页面顶部...但是当我修复它时，它不会出现。而不是导航栏只有puncts..no标头，没有导航栏....没有只是背景... 这是我的代码 HTML：

</head>
<body>
<div id="header">
<li><a href="index.html" class="Logo"></a></li>
<li><a href="index.html"class="Home"></a></li>
<li><a href="Sugestology.html"class="Sugestology"></a></li>
<li><a href="TheCreator.html"class="Creator"></a></li>
<li><a href="InBulgaria.html"class="InBulgaria"></a></li>
<li><a href="Contacts.html"class="Contacts"></a></li>
</div>

CSS：

#header {
position: fixed;
top: 0;
z-index: 500;
height: 80 px;
width:100%;
}

#header li {float:left; }
#header li a.Logo {width:20%; height:80px; background:url("nav_01.jpg")}
#header li a.Home {width:20%; height:80px; background:url("nav_02.jpg")}
#header li a.Sugestology {width:20%; height:80px; background:url("nav_03.jpg")}
#header li a.Creator {width:20%; height:80px; background:url("nav_04.jpg")}
#header li a.InBulgaria {width:20%; height:80px; background:url("nav_05.jpg")}
#header li a.Contacts {width:20%; height:80px; background:url("nav_06.jpg")}

我再次希望此导航为100％宽度，左侧是徽标nav_01.jpg，它将导致索引....并在右侧导航栏中将所有这些叠加在顶部向下滚动....但这段代码不会只出现六个完整的停止....

Answer 1

这是正确的代码：

http://jsfiddle.net/4BJLb/2/

<强> CSS

#header {
    position: fixed;
    top: 0;
    height: 80 px;
    width:100%;
    z-index: 500;
}
#header ul {
    padding-left: 0;
    height: 80px;
}
#header li {
    list-style: none;
    float: left;
    height: 80px;
    width: 16.6%;
}
#header li a {
    display: inline-block;
    width: 100%;
    height: 80px;
    background-size: cover; // >IE9
}

#header li a:nth-child(1) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(2) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(3) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(4) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(5) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(6) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}

<强> HTML

<div id="header">
    <ul>
        <li><a href="index.html"></a></li>
        <li><a href="index.html"></a></li>
        <li><a href="Sugestology.html"></a></li>
        <li><a href="TheCreator.html"></a></li>
        <li><a href="InBulgaria.html"></a></li>
        <li><a href="Contacts.html"></a></li>
    </ul>
</div>

Answer 2

在div中加入一些文字

另外，你需要让li list-style: none;摆脱惩罚

这里是css：

#header {
position: fixed;
top: 0;
z-index: 500;
height: 80 px;
width:100%;
    display: inline-block;
    float: left;
}


#header li {float:left; width:15%; height:80px; list-style: none;}
#header li a.Logo {background:url("nav_01.jpg")}
#header li a.Home {background:url("nav_02.jpg")}
#header li a.Sugestology {background:url("nav_03.jpg")}
#header li a.Creator {background:url("nav_04.jpg")}
#header li a.InBulgaria {background:url("nav_05.jpg")}
#header li a.Contacts {background:url("nav_06.jpg")}

注意：您需要将15％更改为适合100％的宽度（div的数量x div的宽度＆lt; = 100％），否则您将不在页面中

这里是html

<div id="header">
<li><a href="index.html" class="Logo">1</a></li>
<li><a href="index.html"class="Home">2</a></li>
<li><a href="Sugestology.html"class="Sugestology">3</a></li>
<li><a href="TheCreator.html"class="Creator">4</a></li>
<li><a href="InBulgaria.html"class="InBulgaria">5</a></li>
<li><a href="Contacts.html"class="Contacts">6</a></li>
</div>

在行动中查看

fiddle

试图修复标题导航栏

2 个答案: