gpt4 book ai didi

html - 使导航栏到达页面末尾

转载 作者:太空宇宙 更新时间:2023-11-04 11:15:31 24 4
gpt4 key购买 nike

我想弄清楚如何删除辅助导航的最后一个黑色部分。我希望“愿望 list ”链接是最后一件事,没有边框,然后基本上没有更多的黑色空间。我只是不确定该怎么做。

我的 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/

最佳答案

将背景颜色应用于您的列表项 <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/

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

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

关于html - 使导航栏到达页面末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33268625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com