如何在水平導航欄中居中列表項目？

Question

我創建了一個導航欄。 我想在我的導航欄中心列表項目（具有相同的大小）。而在這個時候，它必須做出反應。首先我在互聯網上搜索找到解決方案。但我仍然沒有找到解決方案。我試圖用填充進行試驗。但我沒有成功。有誰能夠幫助我？

.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>

Answer 1

https://jsfiddle.net/vrokv6kg/4/

<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> 

<style> 
.navigationbar ul { 
    overflow: hidden; 
} 

.navigationbar { 
    width: 100%; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    background-color: #FF5800; 
} 

li { 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 

li a, .dropbtn { 
    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; 
    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; 
} 

ul { text-align: center; } 
li { display: inline-block; margin: 0 auto; } 
</style> 

Answer 2

嘗試使用Flexbox的代替浮子：

.navigationbar { 
width: 100%; 
background-color: #FF5800; 
margin: 0; 
padding: 0; 
} 

ul { 
width: 50%; 
list-style-type: none; 
margin: 0 auto; 
padding: 0 25%; 
display: flex; 
} 

li { 
margin: 0 auto; 
text-align: center; 
padding: 0; 
justify-content: 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; 
}