使导航栏到达页面末尾

Question

我想知道如何删除辅助导航的最后一个黑色部分。我希望 "wishlist" link 成为那里的最后一件事，基本上没有边框，然后更黑 space 。我只是不确定该怎么做。

我的html:

<title>LOST Collector</title>
 <link rel="stylesheet" type="text/css" href="main.css"/>        
</head>
    <body>
        <!--Header-->
        <header>    
            <a href="http://www.lostcollector.com">
                <img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
            </a>
            <!--Primary navigation-->
            <nav>
                <ul>
                    <li><a href="template.html">Home</a></li>
                    <li><a href="template.html">About Us</a></li>
                    <li><a href="template.html">Contact</a></li>
                </ul>
            </nav>
        </header>
         <!-- Secondary Navigation -->
        <ul id="navigation_layout">
          <li><a href="artwork.html">Artwork</a></li>
          <li><a href="autographs.html">Autographs</a></li>
          <li><a href="booksandmagazines.html">Books/Magazines</a></li>
          <li><a href="clothing.html">Clothing</a></li>
          <li><a href="dvdsandcds.html">Dvds and Cds</a></li>
          <li><a href="filmcrew.html">Film Crew</a></li>
          <li><a href="originalprops.html">Original Props</a></li>
          <li><a href="specialevents.html">Special Events</a></li>
          <li><a href="toysandgames.html">Toys and games</a></li>
          <li><a href="tradingcards.html">Trading cards</a></li>
          <li><a href="everythingelse.html">Everything else</a></li>
          <li><a href="wishlist.html">Wish list</a></li>
        </ul>

我的css:

   body {
    width: 1200px;
    height: 130px;
    margin: 0 auto;
    background-color: #ffffff;
    color: #111111;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 90%;
}

header a {
    float:left; 
    display:inline-block;
}

     header a img {
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
     margin-right:10px;
     display: inline;
     height: 112px;
     width:; 113px;
}

 nav {
     display: inline;
     float: right;
}

nav ul  {
    list-style: none;
    display: inline;
}

nav ul li {
    display: inline-block;
    text-decoration: none;
    font-size: 90%;
    font-weight: bold;
    color: #000000;
    margin-right: 50px;
    padding: 40px 30px;
    padding: right 10px;
}   

nav li a {
    display: inline-block;
    padding: 4px 3px;
    text-decoration: none;
    font-size: 90%;
    font-weight: bold;
    color: #000000;
} 

nav li a:hover {
    color: #ff0000;
    background-color: #ffffff;
}

/*secondary navigation*/
 #navigation_layout {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; 
    background-color: #000000;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}
#navigation_layout li {
    float: left;
}
#navigation_layout li a  {
    display: block;
    padding: 4px 3px;
    text-decoration: none;
    font-size: 90%;
    font-weight: bold;
    color: #ffffff;
    border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
    color: #ff0000;
    background-color: #fff; 
}

我已经把它放到了这里的 jsfiddle 中，所以我想做什么就更清楚了。 https://jsfiddle.net/thzfm0fe/1/

Answer 1

将背景颜色应用于您的列表项 <li> 而不是 <ul>。

从此处删除 background-color：

#navigation_layout {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    /* background-color: #000000; */
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}

并添加到这里：

#navigation_layout li {
    float: left;
    background-color: black;
}

https://jsfiddle.net/thzfm0fe/3/

默认情况下，<ul> 是块级元素，将填满父元素的整个宽度。您的列表项 <li> 没有填满父级的整个宽度，但您的 <ul> 填满了，因此在您的列表项之后有额外的黑色。

通过将背景颜色应用于 <li>，您不再需要为锚点添加白色边框。您可以应用边距。

使导航栏到达页面末尾

making nav li reach end of page

html

css

nav