Question

我设计了一个导航栏，该导航栏的中间有一个标题，两侧各有2个箭头

到目前为止，这是我的代码：

.TopNav {
  width: 1119px;
  height: 50px;
  background: #FAF7FC;
  position: relative;
}

#name {
  position: relative;
  text-align: center;
  font-size: 30px;
}

.arrowR .arrowL {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transition: 0.5s;
  box-shadow: -2px 2px 0 rgba(18, 0, 94, 0.5);
  cursor: pointer;
}

.arrowL {
  transform: rotate(45deg);
}

.arrowR {
  transform: rotate(225deg);
}

.arrowL:hover .arrowR:hover {
  box-shadow: -2px 2px 0 rgba(18, 0, 94, 1);
}

<body>
  <div class="TopNav col-sm-12 col-sm-12">
    <div class="content">
      <p id="name">
        This Week
      </p>
    </div>
    <div class="arrowR"></div>
    <div class="arrowL"></div>
  </div>
</body>

这仅显示矩形（主栏）和标题，但不显示箭头。有什么问题，如何将箭头放在条形的每一侧？

Answer 1

您犯了个小错误。您忘记在两个类之间添加逗号。还有其他问题。我试图解决这个问题。请检查以下代码段。

.TopNav {
    width: 1119px;
    height: 50px;
    background: #FAF7FC;
    position: relative;
  }
  
  #name {
    position: relative;
    text-align: center;
    font-size: 30px;
  }
  
  .arrowR, .arrowL {
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -10px;
    display: block;
    width: 20px;
    height: 20px;
    transition: 0.5s;
    box-shadow: -2px 2px 0 rgba(18, 0, 94, 0.5);
    cursor: pointer;
  }
  
  .arrowL {
      transform: rotate(45deg);
    }
    
    .arrowR {
    left: auto;
    right: 15px;
    transform: rotate(225deg);
  }
  
  .arrowL:hover, .arrowR:hover {
    box-shadow: -2px 2px 0 rgba(18, 0, 94, 1);
  }

<div class="TopNav col-sm-12 col-sm-12">
    <div class="content">
      <p id="name">
        This Week
      </p>
    </div>
    <div class="arrowR"></div>
    <div class="arrowL"></div>
  </div>

在导航栏上显示形状时出现问题

1 个答案: