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

时间：2020-06-19 07:35:14

标签： html css

我不熟悉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>

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：0)

这就是我想要的。运行代码片段以查看效果。

希望这会有所帮助。

我用过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>

答案 1 :(得分：0)

您可以使用 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;
        }

相关问题
最新问题