我创建了一个导航栏。 我想在我的导航栏中心列表项目(具有相同的大小)。而在这个时候,它必须做出反应。首先我在互联网上搜索找到解决方案。但我仍然没有找到解决方案。我试图用填充进行试验。但我没有成功。有谁能够帮助我?如何在水平导航栏中居中列表项目?
.navigationbar ul {
overflow: hidden;
}
.navigationbar {
width: 100%;
}
ul {
width: 50%;
list-style-type: none;
margin: 0;
padding-left: 25%;
padding-right: 25%;
overflow: hidden;
background-color: #FF5800;
}
li {
width: 10%;
margin-right: auto;
margin-left: auto;
float: left;
text-align: center;
}
li a,
.dropbtn {
width: 10%;
display: block;
text-align: center;
color: white;
padding: 14px 21px;
text-decoration: none;
font-family: Verdana
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
color: white;
transition: background-color 0.8s, color 0.8s;
}
li .active {
background-color: red;
margin: 0;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 154px;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header class="header">
<div class="logo2">
<img class="logo" src="afbeeldingen/rijnijssel-logo.jpg">
</div>
<div class="navigationbar">
<ul>
<li><a class="active" href="page1.html">page1</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">dropdown</a>
<div class="dropdown-content">
<a href="page2.html">page2</a>
<a href="page3.html">page3</a>
<a href="page4.html">page4</a>
<a href="page5.html">page5</a>
<a href="page6.html">page6</a>
</div>
</li>
<li><a href="page7.html">page7</a></li>
<li><a href="page8.html">page8</a></li>
<li><a href="page9.html">page9</a></li>
<li><a href="page10.html">page10</a></li>
</ul>
</div>
</header>
它不居中。也许这与代码 – martin
中的填充有关@马丁看来,'ul {display:flex; justify-content:center; }'会解决它。这里是:https://jsfiddle.net/vrokv6kg/2/ –
现在它在列表项之间创建空间并且它不响应 – martin