我试图让这段代码在中间和 95% 处显示我的导航栏(每侧 2,5% 空闲(。我在互联网上找到了几种方法,但它们需要我使用不同的风格,我想保持相同。
#nav ul {
position: fixed;
top: 5px;
width: 100%;
list-style-type: none;
margin: 0;
margin-left: 10%;
padding: 0;
overflow: hidden;
background-color: #ffffff;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: #0066cc;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
#nav li a:hover {
background-color: #111;
}
#nav .active {
background-color: #ffffff;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #0066cc;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0066cc;
}
#nav .inactive {
border-width: 5px;
border-top-style: solid;
border-top-color: #ffffff;
border-top-color: #0066cc;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0066cc;
}
Html part:
<div id="nav">
<ul>
<li><a class="active" href="../HTML/Home.html">Home</a></li>
<li><a class="inactive" href="../HTML/Shop.html">Shop</a></li>
<li><a class="inactive" href="../HTML/SocialNews.html">Social News</a></li>
<li><a class="inactive" href="../HTML/Gallary.html">Gallary</a></li>
<li><a class="inactive" href="../HTML/CustomerReviews.html">Customer Reviews</a></li>
<li><a class="inactive" href="../HTML/Sponsorship.html">Sponsorship</a></li>
<li><a class="inactive" href="../HTML/Contact.html">Contact</a></li>
<li><a class="inactive" href="../HTML/Cart.html">Cart</a></li>
</ul>
</div>
使用 width: 95%; left: 50%; transform: translateX(-50%);
使菜单宽度为 95% 并居中。
然后将display: flex
添加到菜单中,flex: 1 0 0
到li
以拉伸这些元素,以便它们填满菜单。
#nav ul {
position: fixed;
top: 5px;
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #ffffff;
width: 95%;
display: flex;
left: 50%;
transform: translateX(-50%);
}
#nav li {
flex: 1 0 0;
}
#nav li a {
display: block;
color: #0066cc;
text-align: center;
padding: 10px 20px;
text-decoration: none;
height: 100%;
box-sizing: border-box;
}
#nav li a:hover {
background-color: #111;
}
#nav .active {
background-color: #ffffff;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #0066cc;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0066cc;
}
#nav .inactive {
border-width: 5px;
border-top-style: solid;
border-top-color: #ffffff;
border-top-color: #0066cc;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #0066cc;
}
<div id="nav">
<ul>
<li><a class="active" href="../HTML/Home.html">Home</a></li>
<li><a class="inactive" href="../HTML/Shop.html">Shop</a></li>
<li><a class="inactive" href="../HTML/SocialNews.html">Social News</a></li>
<li><a class="inactive" href="../HTML/Gallary.html">Gallary</a></li>
<li><a class="inactive" href="../HTML/CustomerReviews.html">Customer Reviews</a></li>
<li><a class="inactive" href="../HTML/Sponsorship.html">Sponsorship</a></li>
<li><a class="inactive" href="../HTML/Contact.html">Contact</a></li>
<li><a class="inactive" href="../HTML/Cart.html">Cart</a></li>
</ul>
</div>