html - 如何使导航栏“按钮”居中?
问题描述
我正在制作一个有趣的网站,并希望将我的导航栏居中,但似乎没有任何效果。我希望导航栏占满整个宽度,但中间有“按钮”。而且为了响应,我已经尝试在 css (navbar li) 中添加:margin-left: 50%。但这不是我要找的,margin-left: auto 和 margin-right: auto 也不起作用。我尝试使用 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;
.
推荐阅读
- javascript - 为什么出现 input_Login 在浏览器中未定义?
- debugging - VSCode 中的绿色调试器指针表示什么?
- asp.net-core - IdentityServer4,WindowsCryptographicException:系统找不到指定的文件
- pytorch - 找不到有效的 cuDNN 算法来运行卷积
- haskell - 如何将 Control.Monad.Reader 中的 mapReader 用于 reader monad?
- c++ - 打破 2 组中 1 到 n 个数的排列
- r - 在 Ubuntu 上安装 semMediation 包的问题
- ruby - 在循环的每次迭代中写入 Ruby 中的文件
- javascript - Chai-http/mocha 总是返回一个 HTTP 404
- mongodb - 对 MongoDB 的初始 POST 在我没有添加任何内容的数组中创建一个空对象