>

다음과 같은 메뉴를 만들지 만 마지막 작업에서 문제가 발생했습니다. 이것이 내가 얻는 것입니다 :.

편집 :첫 번째 이미지는 상당히 넓으며 스택 오버플로가 제공하는 공간에 잘 맞지 않습니다. 다음은 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>

이 문제가 발생하는 이유를 이해하지만이 문제를 해결하는 방법을 모르겠습니다

  • 답변 # 1

    앵커 태그 안에 아이콘을 설정하고 다른 레이블을 범위 또는 div에 설정하면 쉽게 해결할 수 있습니다.

    <a class="nav-link" href="#">
       <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>Вход
       <!-- Here you set the other label in the same link -->
       <span>Регистрация</span>
    </a>
    
    

    링크가 가리키면 CSS에서 해당 범위 또는 div의 색상을 유지하십시오.

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

  • 답변 # 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>
    
    

  • 이전 javascript - 하나의 레코드를 반환하는 GraphQL 쿼리가 실패하는 이유는 무엇입니까?하지만 모든 레코드를 찾기위한 쿼리는 제대로 작동합니까?
  • 다음 ios - 신속한 다중 상속을 수행하는 방법은 무엇입니까?