如何使我的导航栏项目居中？

Question

我一直在查看与我相关的其他问题，大多数时候建议"text-align:center"。然而，即使我将它实现到我的代码中，导航栏仍然不居中......这是我的代码：

/* NAVIGATION BAR */

#navigation {
 width:1300px;
 height:auto;
}

#nav {
    width: auto;
}

.ulnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.navli {
 float:left;
}

.navli a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
}

.navli a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.navli.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index:1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
 display:block;
}

.active {
 background-color:green;
}

<div id="navigation">
<div id="nav">
<ul class="ulnav">
  <li class="navli"><a class="active" href="#home">Home</a></li>
  <li class="navli"><a href="#news">Link</a></li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Droplink 1</a>
      <a href="#">Droplink 2</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Droplink 2.1</a>
      <a href="#">Droplink 2.2</a>
      <a href="#">Droplink 2.3</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 3</a>
    <div class="dropdown-content">
      <a href="#">Droplink3.1</a>
   <a href="#">Droplink3.2</a>
      <a href="#">Droplink3.3</a>
    </div>
  </li>
  <li class="navli"><a href="#news">Link 2</a></li>
</ul>
</div>
</div>

感谢您提前提出任何建议！

Answer 1

在你的 navli class 上删除 float:left 并将其设置为 display:inline-block 并在你的 #nav 上添加 text-align:center，并使你的 [=16] 居中=] 添加 margin:0 auto;

/* NAVIGATION BAR */

#navigation {
 width:1300px;
 height:auto;
    margin : 0 auto;
}

#nav {
    width: auto;
    text-align : center;
}

.ulnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.navli {
 /* float:left;*/
   display : inline-block;
}

.navli a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
}

.navli a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.navli.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index:1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
 display:block;
}

.active {
 background-color:green;
}

<div id="navigation">
<div id="nav">
<ul class="ulnav">
  <li class="navli"><a class="active" href="#home">Home</a></li>
  <li class="navli"><a href="#news">Link</a></li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Droplink 1</a>
      <a href="#">Droplink 2</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Droplink 2.1</a>
      <a href="#">Droplink 2.2</a>
      <a href="#">Droplink 2.3</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 3</a>
    <div class="dropdown-content">
      <a href="#">Droplink3.1</a>
   <a href="#">Droplink3.2</a>
      <a href="#">Droplink3.3</a>
    </div>
  </li>
  <li class="navli"><a href="#news">Link 2</a></li>
</ul>
</div>
</div>

Answer 2

您在 li 上使用了 float:left，将它们左对齐。我已删除它并将 text-align:center 添加到 ul

这是您要找的吗？

/* NAVIGATION BAR */

#navigation {
 width:1300px;
 height:auto;
}

#nav {
    width: auto;
}

.ulnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align:center;
}

.navli {
 display:inline-block;
}

.navli a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
}

.navli a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.navli.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index:1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
 display:block;
}

.active {
 background-color:green;
}

<div id="navigation">
<div id="nav">
<ul class="ulnav">
  <li class="navli"><a class="active" href="#home">Home</a></li>
  <li class="navli"><a href="#news">Link</a></li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Droplink 1</a>
      <a href="#">Droplink 2</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Droplink 2.1</a>
      <a href="#">Droplink 2.2</a>
      <a href="#">Droplink 2.3</a>
    </div>
  </li>
  <li class="dropdown navli">
    <a href="#" class="dropbtn">Dropdown 3</a>
    <div class="dropdown-content">
      <a href="#">Droplink3.1</a>
   <a href="#">Droplink3.2</a>
      <a href="#">Droplink3.3</a>
    </div>
  </li>
  <li class="navli"><a href="#news">Link 2</a></li>
</ul>
</div>
</div>

如何使我的导航栏项目居中？

How to center my navbar items?

html

css

navigation

center

navbar