Question

注意：我只想说我是 HTML、CSS 和使用 Bootstrap 的新手，所以可能是我错误地搞砸了一些东西，但我只是不知道是什么。

我目前正在开发一个网站，我一直在努力修复我的导航栏。 This is the problem I'm having with the header。是什么导致购物车和登录图标显示在菜单下方而不是导航栏末尾？

以下是该部分的 CSS 和 html。我知道 Bootstrap 带有一些设置，我已经尝试使用检查元素来解决它，但我无法隔离是什么弄乱了我的代码。

HTML：

div class="nav">
    <!-- menu bars -->

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active col-sm-auto" id="menu-item"><a href="../P1/index.html">Home</a></li><br/>
          <li class="active col-sm-auto" id="dropdown">
            <button class="dropbtn" id="aisle">Aisle</button>
            <div class="dropdown-content">
              <a href="../P2-P3/john/fruits.html">Fruits</a>
              <a href="../P2-P3/joon/vegetables/vegetables.html"
                >Vegetables</a
              >
              <a href="../P2-P3/joon/meats/meats.html">Meats</a>
              <a href="../P2-P3/joon/milk_eggs/milk_eggs.html"
                >Milk & Eggs</a
              >
              <a href="../P2-P3/ulas/snacks-aisle.html">Snacks</a>
              <a href="../P2-P3/francis/beverages.html">Beverages</a>
              <a href="../P2-P3/eve/prepared-meals.html">Prepared meals</a>
            </div>
          </li><br/>
          <li class="active col-sm-auto" id="menu-item"><a href="#">Deals</a></li><br/>
          <li class="active col-sm-auto" id="menu-item"><a href="#">Services</a></li><br/>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="shopping-cart">
            <a href="../P4/P4-shopping_cart.html" class="fas fa-shopping-cart" id="shopping-cart"></a>
            </div>
          </li>
          <li>
            <div class="user-login">
              <a href="../P5/P5-login.html" class="fas fa-user">Sign up</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>

CSS：

/* navigation bar styling */
.nav {
    width: 100%;
    height: 35px;
    background-color: #a0b284;
    color: #f6f8f2;
}
.navbar {
    height: 100%;
    display: inline-block;
    font-family: MontserratLight;
    vertical-align: bottom;
    text-align: center;
    color: #f6f8f2;
    overflow:-moz-hidden-unscrollable;
    padding-left: 1%;
}
#menu-item {
    width: 115px;
    text-align: left;
    padding-left: 10px;
}
#menu-item a:link{
    color: #f6f8f2;
}
#menu-item a:hover {
    color: #c8d1bb;
}
.navbar-right {
   float: right;
   display: inline-block;
}

#shopping-cart {
    color: #f6f8f2;
}
#shopping-cart:hover {
    color: #c8d1bb;
}
#shopping-cart:visited {
    color: #f6f8f2;
}
.user-login {
    color: #f6f8f2;
}
.user-login:visited {
    color: #f6f8f2;
}
.navbar a:visited {
    color: #f6f8f2;
}
.navbar a:hover {
    color: #c8d1bb;
}
#shopping-cart {
    padding-right: 1%;
    padding-left: 1%;
}
.dropbtn {
    vertical-align: top;
    background-color: #a0b284;
    color: #f6f8f2;
    padding-right: 70px;
    border: none;
    border-right: 2px;
    border-right-color: #f6f8f2;
    border-right-width: 2px;
}
.dropdown-content {
    display: none;
    position: absolute;
    text-align: center;
    background-color: #f6f8f2;
    color: #a0b284;
    min-width: none;
    max-width: 110px;
    box-shadow: 0px 3px 10px 0px #777777;
    z-index: 1;
}
.dropdown-content a:link {
    color: #b3c39c;
    text-align: center;
    padding: 7px;
    display: block;
}
.dropdown-content a:visited {
    color: #b3c39c;
    padding: 12px 16px;
    display: block;
}
.dropdown-content a:hover {
    background-color: #b3c39c;
    color: #f6f8f2;
}
#dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #b3c39c;
}

预先感谢您的帮助。

Answer 1

现在你有两个独立的导航栏。一个用于您的主要链接，另一个用于登录和购物车。你应该把你的购物车和登录链接移到你的主导航栏中，并设置一个“float: right;”样式。在他们。这应该可以缓解您的问题。

为什么我的 Bootstrap 导航栏显示不正确？

1 个答案: