我希望有人可以帮助我导航。暂时我将导航中的项目作为列表项而不是将它们包装在标签中，但现在我将它们包装在标签中我遇到了一些问题，我不知道如何修复或为什么会发生这种情况。以下是导航在导航之前的样子。
HTML
<nav> <ul>
<li>Home </li>
<li> News </li>
<li>Pre-Order </li> </ul>
</nav>
<div class="news">
<div class="ind"><article class="news"> <h4> Meet Elf At A Store Near You </h4><img class="story" src="year.jpg"/> <p class="story"> Want to meet buddy himself,
well now you can. He will be at numerous shopping centres all around the country to meet his fans.
A list of destinations buddy will be attending will be released soon so you can have time to meet
the Giant Elf. Feel free to have pictures with him and have a short chat, and dont be worried all elves are
friendly... well most!</p> </article></div>
<div class="ind"><article class="news"> <h4> Elf Set To Be The Chrismas Movie Of The Year </h4> <img class="story" src="year2.jpg"/><p class="story"> With
plenty of other christmas movies due for release in december their is alot of competition for buddies
charming story, but critics have already said Elf is due to be the success story this christmas.
The Times said "The best christmas movie for many a year" while Total Film had already claimed it was
a "modern day classic</p> </article></div>
<div class="ind"><article class="news"> <h4> Pre-Order The DVD </h4> <img class="story" src="dvdnews.jpg"/><p class="story"> We can now announce that
the DVD is avaible to order on our website. Follow the preorder link to get it delivered for our launch
date. You can choose from the standard version and the special edition. We suggest you get the
special edition to make the most of the christmas feel and prolong Buddys Christmas spirit for
as long possible.</p></article></div>
<div class="ind"><article class="news"> <h4> Elf Set For Cinemas </h4> <img class="story" src="cinema.jpg"/><p class="story"> The Movie will now be in cinemas
earlier than expected. The date has moved forwards to 11th Decemeber after the incredible amound of interest.
This will give everyone as much chance to watch it before christmas without the worry out it not being
sold out. Be sure to book your tickets in advance to avoid dissapointment</p> </article>
</div></div>
<footer>
<div id="social">
<a href="https://www.facebook.com/ElfMovie"><img class="socialpics" src="facebook.png"/> <a/>
<a href="https://twitter.com/ElfMovieQuotes"><img class="socialpics2" src="newtwit.png"/> <a/>
</div>
<div id="bottomrow">
<img id="firstfootpic" class="footpic" src="dvdlogo.gif"/>
<img class="footpic" src="bluray.png"/>
<img class="footpic" src="universallogo.png"/>
<img class="footpic" src="cardslogo.png"/> </div>
</footer>
</body>
</html>
CSS
body {
margin:10px auto;
width:70%;
paddding:0px;
max-width:1000px;
}
header {background-image:url("banner.png");
background-repeat: no-repeat;
border-radius:20px;
width;100%;
height:200px;
}
.title {
height:180px;
width:180px;
margin-left:40%;
margin-top:10px;}
.tagline {z-index:1;
position:relative;
bottom:95px;
color:white;
font-weight:900;
font-size:40px;
text-align:center;
color:black;
font-family:Tw Cen MT;
letter-spacing:5px;
}
.snow {
width:100%;
max-height:100px;
z-index:-1;
border-radius:20px; }
.cont {
width:100%;
height:560px;
/*background-color:rgb(44,132,255);*/
background:-moz-linear-gradient(rgb(36,124,250) 60%, white);
border-radius:20px;
position:relative;
}
.pic {
max-height:600px;
max-width:900px;
border-radius:30px;
min-height:600px;
min-width:900px; }
article.drop {
border-radius:30px;
margin-bottom:20px;
}
nav {
width:100%;
margin-top:-17px;
margin-left:auto;
margin-right:auto;
background-color:rgb(214,20,21);
height:60px;
border-radius:10px
}
nav ul li{
float:left;
padding:0px 95px;
list-style:none;
color:white;
margin-top:13px;
font-family:Tw Cen MT;
font-weight:bold;
font-size:2em;
transition:color 0.5s linear 0s;
text-decoration:none;
list-style-type:none;
}
nav ul li :nth-child(1) {
border-right:1px solid white}
nav ul li :nth-child(2) {
border-right:1px solid white}
nav ul li :hover {
color:lightgreen;
}
article.drop {
width:29%;
height:325px;
display:inline;
float:left;
padding:15px;
color:transparent;
font-family:Tw Cen MT;
margin-left:8px;
-moz-transition-duration:2s;
max-height:500px;
color:transparent;
position:relative;
z-index:100;
}
.art1 {background-color:green;
}
.art2 {background-color:rgb(214,20,21);
}
.art1, .art2 {
margin-top:10px }
.pic1 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic2 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic3 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic1:hover {
transform:scale(1.025) }
.pic2:hover {
transform:scale(1.025) }
.pic3:hover {
transform:scale(1.025) }
h2 {
padding:10px;
margin-top:-10px;
color:white;}
article.drop:hover {
height:500px;
width:29%;
display:inline;
float:left;
padding:15px;
color:white;
font-family:Tw Cen MT;
margin-left:8px;
}
footer {
background-color:rgb(36,124,250);
height:250px;
width:100%;
float:clear;
border-radius:5px}
h3 {
position:absolute;
top:700px;
}
.footpic {
float:left;
width:100px;
height:60px;
padding:55px;
margin-top:30px
}
#firstfootpic {
margin-left:40px;
}
aside.artbot {
position:absolute;
top:400px;
left:0px;
}
p.artbot {
color:blue;
font-family:Tw Cen MT;
margin:0 auto;
margin-left:10px;
-moz-column-count:3;
-moz-column-gap:70px;
-moz-column-rule-width:10px;
text-align:justify;
margin-left:50px;
width:90%;
font-weight:500;
text-transform:capitalize;
}
.socialpics {
width:80px;
height:60px;
margin-top:20px;
margin-left:-15px;
}
.socialpics2 {width:80px;
height:70px;
margin-top:20px;
float:right
}
.cb {
height:80px;
width:60px;
position:absolute;
top:400px;
left:290px}
.cb2 {
height:80px;
width:60px;
position:absolute;
top:400px;
left:600px}
body {width:70%;
font-family:Tw Cen MT}
div.news {
background-color:rgb(214,20,21);
/*background-image:url(wallpaper.jpg);*/
width:100%;
height:1200px;
color:white;
padding:30px;
box-sizing:border-box;
border-radius:10px;
border:1px solid white
}
article.news {
width:100%;
height:260px;
background-color:rgb(214,20,21);
box-sizing:border-box;
position:relative;
top:-25px;
border-radius:10px;
opacity:0.85;
;
}
article.news:hover {
transform:scale(1.025);
opacity:1;
}
h4 {
color:white;
width:100%;
background-color:green;
padding:10px;
box-sizing:border-box;
border-radius:10px;
text-align:center;
}
p.story {
width:50%;
padding-left:40px;
padding-top:10px;
font-size:1.1em;
margin-top:42px
}
img.story {
height:180px;
width:300px;
float:right;
margin-right:40px;
border-radius:5px;
}
div.ind {
margin-bottom:0px;}
footer {
margin-top:0px }
现在这是带有标签的，它们的呈现方式不同。 它们都出现在不同的界限上。 尽管输入了＆＃34; none＆＃34; 3. 3链接有一个右边界，但它应该只是前两个。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="order.css">
<link rel="stylesheet" type="text/css" href="news.css">
</head>
<body>
<header>
</header>
<nav> <ul>
<li> <a href="index.html"> Home </a> </li>
<li> <a href="news.html"> News </a></li>
<li> <a href="order.html"> Pre-Order </a></li> </ul>
</nav>
<div class="news">
<div class="ind"><article class="news"> <h4> Meet Elf At A Store Near You </h4><img class="story" src="year.jpg"/> <p class="story"> Want to meet buddy himself,
well now you can. He will be at numerous shopping centres all around the country to meet his fans.
A list of destinations buddy will be attending will be released soon so you can have time to meet
the Giant Elf. Feel free to have pictures with him and have a short chat, and dont be worried all elves are
friendly... well most!</p> </article></div>
<div class="ind"><article class="news"> <h4> Elf Set To Be The Chrismas Movie Of The Year </h4> <img class="story" src="year2.jpg"/><p class="story"> With
plenty of other christmas movies due for release in december their is alot of competition for buddies
charming story, but critics have already said Elf is due to be the success story this christmas.
The Times said "The best christmas movie for many a year" while Total Film had already claimed it was
a "modern day classic</p> </article></div>
<div class="ind"><article class="news"> <h4> Pre-Order The DVD </h4> <img class="story" src="dvdnews.jpg"/><p class="story"> We can now announce that
the DVD is avaible to order on our website. Follow the preorder link to get it delivered for our launch
date. You can choose from the standard version and the special edition. We suggest you get the
special edition to make the most of the christmas feel and prolong Buddys Christmas spirit for
as long possible.</p></article></div>
<div class="ind"><article class="news"> <h4> Elf Set For Cinemas </h4> <img class="story" src="cinema.jpg"/><p class="story"> The Movie will now be in cinemas
earlier than expected. The date has moved forwards to 11th Decemeber after the incredible amound of interest.
This will give everyone as much chance to watch it before christmas without the worry out it not being
sold out. Be sure to book your tickets in advance to avoid dissapointment</p> </article>
</div></div>
<footer>
<div id="social">
<a href="https://www.facebook.com/ElfMovie"><img class="socialpics" src="facebook.png"/> <a/>
<a href="https://twitter.com/ElfMovieQuotes"><img class="socialpics2" src="newtwit.png"/> <a/>
</div>
<div id="bottomrow">
<img id="firstfootpic" class="footpic" src="dvdlogo.gif"/>
<img class="footpic" src="bluray.png"/>
<img class="footpic" src="universallogo.png"/>
<img class="footpic" src="cardslogo.png"/> </div>
</footer>
</body>
</html>
CSS
body {
margin:10px auto;
width:70%;
paddding:0px;
max-width:1000px;
}
header {background-image:url("banner.png");
background-repeat: no-repeat;
border-radius:20px;
width;100%;
height:200px;
}
.title {
height:180px;
width:180px;
margin-left:40%;
margin-top:10px;}
.tagline {z-index:1;
position:relative;
bottom:95px;
color:white;
font-weight:900;
font-size:40px;
text-align:center;
color:black;
font-family:Tw Cen MT;
letter-spacing:5px;
}
.snow {
width:100%;
max-height:100px;
z-index:-1;
border-radius:20px; }
.cont {
width:100%;
height:560px;
/*background-color:rgb(44,132,255);*/
background:-moz-linear-gradient(rgb(36,124,250) 60%, white);
border-radius:20px;
position:relative;
}
.pic {
max-height:600px;
max-width:900px;
border-radius:30px;
min-height:600px;
min-width:900px; }
article.drop {
border-radius:30px;
margin-bottom:20px;
}
nav {
width:100%;
margin-top:-17px;
margin-left:auto;
margin-right:auto;
background-color:rgb(214,20,21);
height:60px;
border-radius:10px
}
nav ul li a{
float:left;
padding:0px 95px;
list-style:none;
color:white;
margin-top:13px;
font-family:Tw Cen MT;
font-weight:bold;
font-size:2em;
transition:color 0.5s linear 0s;
text-decoration:none;
list-style-type:none;
}
nav ul li a :nth-child(1) {
border-right:1px solid white}
nav ul li a:nth-child(2) {
border-right:1px solid white}
nav ul li a:hover {
color:lightgreen;
}
article.drop {
width:29%;
height:325px;
display:inline;
float:left;
padding:15px;
color:transparent;
font-family:Tw Cen MT;
margin-left:8px;
-moz-transition-duration:2s;
max-height:500px;
color:transparent;
position:relative;
z-index:100;
}
.art1 {background-color:green;
}
.art2 {background-color:rgb(214,20,21);
}
.art1, .art2 {
margin-top:10px }
.pic1 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic2 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic3 {width:274px;
height:246px;
border-radius:10px;
margin-top:-10px;
border:2px solid white;
}
.pic1:hover {
transform:scale(1.025) }
.pic2:hover {
transform:scale(1.025) }
.pic3:hover {
transform:scale(1.025) }
h2 {
padding:10px;
margin-top:-10px;
color:white;}
article.drop:hover {
height:500px;
width:29%;
display:inline;
float:left;
padding:15px;
color:white;
font-family:Tw Cen MT;
margin-left:8px;
}
footer {
background-color:rgb(36,124,250);
height:250px;
width:100%;
float:clear;
border-radius:5px}
h3 {
position:absolute;
top:700px;
}
.footpic {
float:left;
width:100px;
height:60px;
padding:55px;
margin-top:30px
}
#firstfootpic {
margin-left:40px;
}
aside.artbot {
position:absolute;
top:400px;
left:0px;
}
p.artbot {
color:blue;
font-family:Tw Cen MT;
margin:0 auto;
margin-left:10px;
-moz-column-count:3;
-moz-column-gap:70px;
-moz-column-rule-width:10px;
text-align:justify;
margin-left:50px;
width:90%;
font-weight:500;
text-transform:capitalize;
}
.socialpics {
width:80px;
height:60px;
margin-top:20px;
margin-left:-15px;
}
.socialpics2 {width:80px;
height:70px;
margin-top:20px;
float:right
}
.cb {
height:80px;
width:60px;
position:absolute;
top:400px;
left:290px}
.cb2 {
height:80px;
width:60px;
position:absolute;
top:400px;
left:600px}
body {width:70%;
font-family:Tw Cen MT}
div.news {
background-color:rgb(214,20,21);
/*background-image:url(wallpaper.jpg);*/
width:100%;
height:1200px;
color:white;
padding:30px;
box-sizing:border-box;
border-radius:10px;
border:1px solid white
}
article.news {
width:100%;
height:260px;
background-color:rgb(214,20,21);
box-sizing:border-box;
position:relative;
top:-25px;
border-radius:10px;
opacity:0.85;
;
}
article.news:hover {
transform:scale(1.025);
opacity:1;
}
h4 {
color:white;
width:100%;
background-color:green;
padding:10px;
box-sizing:border-box;
border-radius:10px;
text-align:center;
}
p.story {
width:50%;
padding-left:40px;
padding-top:10px;
font-size:1.1em;
margin-top:42px
}
img.story {
height:180px;
width:300px;
float:right;
margin-right:40px;
border-radius:5px;
}
div.ind {
margin-bottom:0px;}
footer {
margin-top:0px }
我确定这是一个非常容易的解决方案，但目前我无法看到我做错了什么。
答案 0 :(得分：0)
看起来您只是简单地将a添加到li选择器，而没有预料到某些指定的样式应该实际应用于li本身，即float:left;
如果没有演示，很难坚决表达，但下面的内容可能有所帮助：
nav ul li{ /* <--- you need to seperate out the styles which apply to the li specifically*/
float:left;
list-style:none;
margin-top:13px;
}
nav ul li a{
padding:0px 95px;
display:block;
color:white;
font-family:Tw Cen MT;
font-weight:bold;
font-size:2em;
transition:color 0.5s linear 0s;
text-decoration:none;
}
nav ul li:nth-child(1) {
border-right:1px solid white
}
nav ul li:nth-child(2) {
border-right:1px solid white
}
nav ul li a:hover {
color:lightgreen;
}