html - 我怎样才能像示例图像那样将子列表项居中？

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

只要让顶层的 ul 成为相对的并且保持父 li 不定位，那么你就可以完全定位子 ul 以获取全宽并居中对齐 child :

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