我正在制作一个有趣的网站,并希望使导航栏居中,但似乎无济于事。我希望导航栏的整个宽度全,但中间有“按钮”。而且响应迅速,我已经尝试添加css(navbar li):margin-left:50%。但这不是我想要的,左边距:自动和右边距:自动也不起作用。我尝试使用display:inline-block和text-align:center; 但这不起作用。你有什么建议吗?
.navbar {
position: relative;
margin-top: -47px;
}
.navbar ul {
width: 99%;
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar li {}
.navbar li a {
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 47px;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
<div class="navbar">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown"><a href="bewegingillusie.html">Plans</a>
<div class="dropdown-content">
<a href="about_us.html">Route</a>
<a href="about_the_website.html">Places I want to go</a>
<a href="about_the_website.html">My budget</a>
</div>
</li>
<li class="dropdown"><a href="fotoillusie.html">Journey</a>
<div class="dropdown-content">
<a href="about_us.html">South-Africa</a>
<a href="about_the_website.html">Thailand</a>
<a href="about_the_website.html">Country1</a>
<a href="about_the_website.html">Country2</a>
<a href="about_the_website.html">Country3</a>
<a href="about_the_website.html">Country4</a>
</div>
</li>
<li><a href="kleurillusie.html">Photos</a></li>
<li><a href="vormillusie.html">Other websites</a></li>
<li class="dropdown"><a href="about.html">About</a></li>
</ul>
</div>
你有没有尝试设置display: flex;
你的<ul>
?然后,您应该可以添加justify-content: center;
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句