如何使此导航菜单居中

Question

我看过类似的堆栈溢出案例，但他们的解决方案对我不起作用。我只想让导航栏居中，这就是问题所在，我正在努力避免在这样做的时候引入bug。我已经经历了一段艰难的时间，因为while.This是我的html：

​

.toggle,
[id^=drop] {
  display: none;
}


/* Giving a background-color to the nav container. */

nav {
  margin: 0;
  padding: 0;
  background-color: #254441;
}


/* Since we'll have the "ul li" "float:left"
     * we need to add a clear after the container. */

nav:after {
  content: "";
  display: table;
  clear: both;
}


/* Removing padding, margin and "list-style" from the "ul",
     * and adding "position:reltive" */

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}


/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #254441;
}


/* Styling the links */

nav a {
  display: block;
  padding: 14px 20px;
  color: #FFF;
  font-size: 17px;
  text-decoration: none;
}

nav ul li ul li:hover {
  background: #000000;
}


/* Background color change on Hover */

nav a:hover {
  background-color: #000000;
}


/* Hide Dropdowns by Default
     * and giving it a position of absolute */

nav ul ul {
  display: none;
  position: absolute;
  /* has to be the same number as the "line-height" of "nav a" */
  top: 60px;
}


/* Display Dropdowns on Hover */

nav ul li:hover>ul {
  display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}


/* Second, Third and more Tiers 
     * We move the 2nd and 3rd etc tier dropdowns to the left
     * by the amount of the width of the first tier.
    */

nav ul ul ul li {
  position: relative;
  top: -60px;
  /* has to be the same number as the "width" of "nav ul ul li" */
  left: 170px;
}


/* Change ' +' in order to change the Dropdown symbol */

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}

<nav>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">WordPress +</label>
      <a href="#">WordPress</a>
      <input type="checkbox" id="drop-1" />
      <ul>
        <li><a href="#">Themes and stuff</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Tutorials</a></li>
      </ul>

    </li>
    <li>

      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Web Design +</label>
      <a href="#">Web Design</a>
      <input type="checkbox" id="drop-2" />
      <ul>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Links</a></li>
        <li>

          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Tutorials +</label>
          <a href="#">Tutorials</a>
          <input type="checkbox" id="drop-3" />

          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

​

任何帮助都将不胜感激。

Answer 1

您已使用float: right连接到nav ul。我删除了它并添加了

display: flex; justify-content: center;

​

.toggle,
[id^=drop] {
  display: none;
}


/* Giving a background-color to the nav container. */

nav {
  margin: 0;
  padding: 0;
  background-color: #254441;
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
  content: "";
  display: table;
  clear: both;
}


/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}


/* Positioning the navigation items inline */

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #254441;
}


/* Styling the links */

nav a {
  display: block;
  padding: 14px 20px;
  color: #FFF;
  font-size: 17px;
  text-decoration: none;
}

nav ul li ul li:hover {
  background: #000000;
}


/* Background color change on Hover */

nav a:hover {
  background-color: #000000;
}


/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
  display: none;
  position: absolute;
  /* has to be the same number as the "line-height" of "nav a" */
  top: 60px;
}


/* Display Dropdowns on Hover */

nav ul li:hover>ul {
  display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}


/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
  position: relative;
  top: -60px;
  /* has to be the same number as the "width" of "nav ul ul li" */
  left: 170px;
}


/* Change ' +' in order to change the Dropdown symbol */

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}

<nav>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">WordPress +</label>
      <a href="#">WordPress</a>
      <input type="checkbox" id="drop-1" />
      <ul>
        <li><a href="#">Themes and stuff</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Tutorials</a></li>
      </ul>

    </li>
    <li>

      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Web Design +</label>
      <a href="#">Web Design</a>
      <input type="checkbox" id="drop-2" />
      <ul>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Links</a></li>
        <li>

          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Tutorials +</label>
          <a href="#">Tutorials</a>
          <input type="checkbox" id="drop-3" />

          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

​

Answer 2

首先，删除您的float: right并添加display: flex; justify-content: center。

nav ul {
  display: flex;
  justify-content: center;
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
}

https://codepen.io/OezlemYi/pen/MOgRRz