Nav问题

Question

我希望有人能帮我导航。目前，我将导航中的项目作为列表项，而不是将它们包装在标签中，但现在我已经将它们包装在一个标签中，我遇到了一些问题，我不知道如何修复，也不知道为什么会发生。这是导航器在导航之前应该怎么看的。

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 }

现在，这里有一个标签，它们呈现的方式不同。1.它们都出现在不同的线上。2.尽管输入“无”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 }

我相信这是一个很容易解决的办法，但目前我只是看不出我做错了什么。

Answer 1

看起来，您只是简单地将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;
}