如何将子列表项（如示例图像）居中？

Question

我正在尝试找出如何使以下嵌套列表居中。目前，我正在使用边距和填充来填充列表项。

将鼠标悬停在父列表项上时，将显示嵌套列表。出于某些原因，在此示例中，嵌套列表项显示为inline-flex，因为inline-block在此示例中未显示。

我想要的示例图片

  #nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center; /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px; /* override chrome user agent style of 40px */
}


/*1st level li styling */

.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}


/*2nd level ul styling */

.dropdown-content {
  position: absolute; /* drops submenu below tabs */
  display: none;      /* hides submenu */
  list-style-type: none; /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  min-width: 100%; /* li stretches % of length of parent element */
  left: 380px;     /* an attempt to push the first list item across the page */
}

li .sub-nav-link {
  text-decoration: none; /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
  margin-right: 120px; /* an attempt to push the 2nd, 3rd, ..  list items further across the page */
}

li:hover>.dropdown-content {
  display: inline-flex; /* inline-block didnt work for me here(?) - but inline-flex did */
}

<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

a JSFiddle to play with my code

Answer 1

 #nav {
      margin: 0;
    }

    ul {
      background: #F8F8F8;
      text-align: center; /* centers 1st level list items but not 2nd level(?)*/
      margin: 0 auto;
      padding-inline-start: 0px; /* override chrome user agent style of 40px */
    }

    /*1st level li styling */
    .nav-tab {
      border: 1px solid #F8F8F8;
      border-radius: 10px 10px 0 0;
      display: inline-block;
      background: #F8F8F8;
      padding: 0 40px;
      font-family: 'Segoe UI';
      font-size: 15px;
      color: #707070;
    }

    .nav-tab:hover {
      background-color: white;
      border: 1px solid white;
      border-radius: 10px 10px 0 0;
    }

    /*2nd level ul styling */
    .dropdown-content {
      position: absolute; /* drops submenu below tabs */
      display: none; /* hides submenu */
      list-style-type: none; /* removes bullet points */
      background: white;
      font-family: 'Segoe UI';
      font-size: 25px;
      border: white;
      min-width: 100%; /* li stretches % of length of parent element */
      left: 0; /* an attempt to push the first list item towards the middle of the page */
    }

    li .sub-nav-link {
      text-decoration: none; /* removes underline on links */
      font-family: 'Segoe UI';
      font-size: 15px;
      color: #707070;
      margin-right: 120px; /* an attempt to push the 2nd, 3rd, ..  list items further across the page */
    }
    
    .dropdown-content li{display: inline-block}

    li:hover>.dropdown-content {
      display: block; /* inline-block didnt work for me here(?) - but inline-flex did */

<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

我将子菜单置于左侧，并使用flexbox将内容居中。还记录在CSS代码中。

  #nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center;
  /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px;
  /* override chrome user agent style of 40px */
}


/*1st level li styling */

.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}


/*2nd level ul styling */

.dropdown-content {
  position: absolute;
  /* drops submenu below tabs */
  display: none;
  /* hides submenu */
  list-style-type: none;
  /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  min-width: 100%; /* li stretches % of length of parent element */
  /* left: 380px;  an attempt to push the first list item across the page */
  left: 0; /* ADDED */
}

li .sub-nav-link {
  text-decoration: none;
  /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
  margin-right: 120px;
  /* an attempt to push the 2nd, 3rd, ..  list items further across the page */
}

li:hover>.dropdown-content {
  /* display: inline-flex;  inline-block didnt work for me here(?) - but inline-flex did */
  display: flex; /* ADDED */
  justify-content: center; /* ADDED */
}

<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

只需使上级ul相对，并保持父级li不定位，那么您就可以绝对定位子级ul以采用全宽并使子级居中对齐：

#nav {
  margin: 0;
}

ul {
  background: #F8F8F8;
  text-align: center; /* centers 1st level list items but not 2nd level(?)*/
  margin: 0 auto;
  padding-inline-start: 0px; /* override chrome user agent style of 40px */
  
  position:relative;  /* ADD THIS */
}

/*1st level li styling */
.nav-tab {
  border: 1px solid #F8F8F8;
  border-radius: 10px 10px 0 0;
  display: inline-block;
  background: #F8F8F8;
  padding: 0 40px;
  font-family: 'Segoe UI';
  font-size: 30px;
  color: #707070;
}

.nav-tab:hover {
  background-color: white;
  border: 1px solid white;
  border-radius: 10px 10px 0 0;
}

/*2nd level ul styling */
.dropdown-content {
  position: absolute; /* drops submenu below tabs */
  list-style-type: none; /* removes bullet points */
  background: white;
  font-family: 'Segoe UI';
  font-size: 25px;
  border: white;
  margin:0;
  padding:0;
  display:none;
  text-align:center;
  left: 0; 
  right:0;   /* stretch content full width of ul with left and right */
  top:100%;  /* push content below current ul */
}

.dropdown-content > li {
    display:inline-block; /* so they centre */
    margin:0 1em;         /* space between each item */
}

li .sub-nav-link {
  text-decoration: none; /* removes underline on links */
  font-family: 'Segoe UI';
  font-size: 25px;
  color: #707070;
}

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

<nav class="nav" id="primary-nav">
  <ul>
    <li class="nav-tab">Products
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Range</a></li>
        <li><a href="#" class="sub-nav-link">Catalogue</a></li>
        <li><a href="#" class="sub-nav-link">Search</a></li>
      </ul>
    </li>
    <li class="nav-tab">About Us
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Mission</a></li>
        <li><a href="#" class="sub-nav-link">Background</a></li>
        <li><a href="#" class="sub-nav-link">Design</a></li>
        <li><a href="#" class="sub-nav-link">Production</a></li>
      </ul>
    </li>
    <li class="nav-tab">Events
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Calendar</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Stockists
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">List</a></li>
        <li><a href="#" class="sub-nav-link">link 2</a></li>
        <li><a href="#" class="sub-nav-link">link 3</a></li>
      </ul>
    </li>
    <li class="nav-tab">Contact
      <ul class="dropdown-content">
        <li><a href="#" class="sub-nav-link">Feedback</a></li>
        <li><a href="#" class="sub-nav-link">FAQ</a></li>
        <li><a href="#" class="sub-nav-link">Details</a></li>
      </ul>
    </li>
  </ul>
</nav>