Question

我制作了一个看起来像这样的菜单： enter image description here ，但是我上次操作的麻烦-身份验证。那就是我得到的：。

编辑：第一张图片很宽，无法完全满足Stack Overflow提供的空间。这是该图片的a link，该图片显示了OP想要的外观。

我的代码：

.navbar-nav li a {
  display: inline-block;
  font-size: 18px;
  color: #d1d1d1;
  vertical-align: middle;
}

.navbar-nav li a:hover {
  color: #efa843;
}

.nav-item {
  margin-right: 32px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="header">
  <div class="container">
    <nav class="navbar navbar-expand">
      <div class="collapse navbar-collapse" id="header_menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
          </li>
          <li class="nav-item">
            <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>
            <a class="nav-link" href="#">Вход</a>
            <a class="nav-link" href="#">Регистрация</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

请给我一个提示，我知道为什么会这样，但是我不知道如何解决这个问题

Answer 1

您可以轻松地解决这一问题，即在锚标签内设置图标，并在跨度或div中设置另一个标签：

.navbar-nav li a:hover span{
  color: #d1d1d1;
}

当链接悬停在CSS中时，请保持该span或div的颜色：

{{1}}

Answer 2

对我有用。请参见下面的实时示例。

.navbar-nav li a {
  display: inline-block;
  font-size: 12px;
  color: #d1d1d1;
  vertical-align: middle;
}

.btnText span a {
  font-size: 12px;
  color: #ccc;
  display: block;
}

.navbar-nav li a:hover,
.btnText span a:hover {
  color: #efa843;
  text-decoration: none;
}

.nav-item {
  margin-right: 25px;
}

.btnText {
  vertical-align: middle;
  display: inline-block;
  padding-left: 5px;
}

.icon {
  color: #D1D1D1;
}

#parent_element:hover>.icon {
  color: #efa843;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="header">
  <div class="container">
    <nav class="navbar navbar-expand">
      <div class="collapse navbar-collapse" id="header_menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
          </li>

          <div id="parent_element">
            <i class="fas fa-user fa-2x icon" style="vertical-align: middle; display: inline-block;"></i>
            <div class="btnText">
              <span><a href="#">Вход</a></span>
              <span><a href="#">Регистрация</a></span>
            </div>
          </div>

        </ul>
      </div>
    </nav>
  </div>
</div>

Answer 3

我在您的代码中发现了一个小错误，该解决方案非常有效。该代码将为您提供帮助。

使用此

    .navbar-nav li a {
      display: inline-block;
      font-size: 18px;
      color: #d1d1d1;
      vertical-align: middle;
    }

    .navbar-nav li a:hover {
      color: #efa843;
    }

    .nav-item {
      margin-right: 32px;
    }
    .navbar-nav li label {
       display: inline-block;
       font-size: 18px;
       color: #d1d1d1;
       vertical-align: middle;
     }

   .navbar-nav li label:hover {
      color: #efa843;
   }
   .navbar-nav li label a{
      text-decoration: none;
    }

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <div class="header">
      <div class="container">
        <nav class="navbar navbar-expand">
          <div class="collapse navbar-collapse" id="header_menu">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
              </li>
              <li class="nav-item">
               <label class="nav-link" ><i class="fas fa-user fa-2x"></i>
                <span><a href="#">Вход</a></span>
              <span><a href="#">Регистрация</a></span>
                </label>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

我做了什么更改

我将在帐户图标之前添加标签标记，并为该标签创建一个单独的CSS。

如果您对此答案不满意或该解决方案无法正常工作，请通知我。

希望这对您有所帮助，谢谢?

Answer 4

只需在 li 标签中添加 flex-shrink-0 类

<div class="header">
      <div class="container">
        <nav class="navbar navbar-expand">
          <div class="collapse navbar-collapse" id="header_menu">
            <ul class="navbar-nav ml-auto">
              <li class="flex-shrink-0 nav-item">
                <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
              </li>
              <li class="flex-shrink-0 nav-item">
                <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
              </li>
              <li class="flex-shrink-0 nav-item">
                <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>
                <a class="nav-link" href="#">Вход</a>
                <a class="nav-link" href="#">Регистрация</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

一个带有两个链接的fa图标

4 个答案: