我的导航栏无法正确填充 100% 的屏幕宽度。导航栏中的项目水平对齐

Question

我是 HTML 和 CSS 编码的新手，一直致力于创建一个练习网站。我的导航栏遇到了这个问题：

当我将宽度更改为 100% 时，导航栏项目彼此水平对齐。 [宽度为 100% 的导航栏图片

我似乎可以将“.top-level-menu>li”类的宽度更改为一个非常具体的数字，它会填满我的屏幕，但它根本不会填满 100% 的宽度。

.third-level-menu {
  position: absolute;
  top: 0;
  right: -190px;
  width: 190px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu>li {
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
}

.third-level-menu>li:hover {
  background-color: gold;
}

.second-level-menu {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  /* width: 273.2px; */
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu>li {
  position: relative;
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
  width: 100%;
}

.second-level-menu>li:hover {
  background-color: gold;
}

.top-level-menu {
  background-color: red;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
}

.top-level-menu>li {
  position: relative;
  height: 30px;
  /* width: 273.2px; */
  background: #6640C1;
  z-index: 2;
  text-align: center;
}

.top-level-menu>li:hover {
  background-color: gold !important;
}

.top-level-menu li:hover>ul {
  display: inline;
}

.top-level-menu a {
  font-family: 'Fjalla One', sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  background: #6640C1;
  display: block;
  line-height: 45px;
}

.top-level-menu a:hover {
  color: #000000;
  background-color: gold;
}

<ul class="top-level-menu">
  <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
  <li>
    <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
    <ul class="second-level-menu">
      <li><a href="#">Jerseys</a></li>
      <li><a href="#">Hats</a></li>
      <li><a href="#">Gym Shorts</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
  <li>
    <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
    <ul class="second-level-menu">
      <li>
        <a href="#">Soccer</a>
        <ul class="third-level-menu">
          <li><a href="#">Barcelona</a></li>
          <li><a href="#">PSG</a></li>
          <li><a href="#">Real Madrid</a></li>
        </ul>

      </li>
      <li>
        <a href="#">Basketball</a>
        <ul class="third-level-menu">
          <li><a href="#">Golden State Warriors</a></li>
          <li><a href="#">Celtics</a></li>
          <li><a href="#">Chicago Bulls</a></li>

        </ul>
      </li>
      <li>
        <a href="#">Football</a>
        <ul class="third-level-menu">
          <li><a href="#">New England Patriots</a></li>
          <li><a href="#">Ravens</a></li>
          <li><a href="#">Atlanta Falcons</a></li>

        </ul>
      </li>

    </ul>
    <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
    </li>
  </li>

</ul>

任何帮助将不胜感激。

Answer 1

您可以使用 display:flex 使其工作。

Made changes to the code snippet here:
.top-level-menu {
            background-color: red;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            display:flex;
            justify-content:space-between;
        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex:1;
        }

Answer 2

这就是你想要的，我相信。运行 sn-p 以查看实际情况。

希望这会有所帮助。

我使用了display:flex 并修复了一些填充。

.third-level-menu {
  position: absolute;
  top: 0;
  right: -190px;
  width: 190px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu>li {
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
}

.third-level-menu>li:hover {
  background-color: gold;
}

.second-level-menu {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  /* width: 273.2px; */
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu>li {
  position: relative;
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
  width: 100%;
}

.second-level-menu>li:hover {
  background-color: gold;
}

.top-level-menu {
  list-style: none;
  width: 100%;
  height: 100px;
  z-index: 1;
  display: flex;
}

.top-level-menu>li {
  position: relative;
  height: 30px;
  background: #6640C1;
  z-index: 2;
  text-align: center;
}

.top-level-menu>li:hover {
  background-color: gold !important;
}

.top-level-menu li:hover>ul {
  display: inline;
}

.top-level-menu a {
  font-family: 'Fjalla One', sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  background: #6640C1;
  display: block;
  line-height: 45px;
  padding: 0px 15px 0px 15px;
}

.top-level-menu a:hover {
  color: #000000;
  background-color: gold;
}

<ul class="top-level-menu">
  <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
  <li>
    <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
    <ul class="second-level-menu">
      <li><a href="#">Jerseys</a></li>
      <li><a href="#">Hats</a></li>
      <li><a href="#">Gym Shorts</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
  <li>
    <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
    <ul class="second-level-menu">
      <li>
        <a href="#">Soccer</a>
        <ul class="third-level-menu">
          <li><a href="#">Barcelona</a></li>
          <li><a href="#">PSG</a></li>
          <li><a href="#">Real Madrid</a></li>
        </ul>

      </li>
      <li>
        <a href="#">Basketball</a>
        <ul class="third-level-menu">
          <li><a href="#">Golden State Warriors</a></li>
          <li><a href="#">Celtics</a></li>
          <li><a href="#">Chicago Bulls</a></li>

        </ul>
      </li>
      <li>
        <a href="#">Football</a>
        <ul class="third-level-menu">
          <li><a href="#">New England Patriots</a></li>
          <li><a href="#">Ravens</a></li>
          <li><a href="#">Atlanta Falcons</a></li>

        </ul>
      </li>

    </ul>
    <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
    </li>
  </li>

</ul>