在导航栏中内嵌下拉箭头

Question

我正在构建一个R闪亮应用程序中的导航栏，我需要将内置下拉箭头移动到菜单下面。

是否与导航栏切换有关？

Answer 1

通常情况下，我会展示如何使用您当前的代码进行操作，但由于我没有为您准备一个示例。

我使用绝对定位将:after元素放在作为父类的nav-item中。请注意，父类需要相对定位才能将绝对定位的子项保留在父项中。

我使用top:50%;将图标降低到父容器的中间位置，但它总是太低，所以我添加了transform:translateY(-50%)。这将把它自己高度的50％拉到图标的上方。

我希望这有用：）

＆＃13;

＆＃13;

.navbar{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

.nav-item{
  flex:1 1 20%;
  position:relative;
  background-color:black;
  padding:1em;
  color:white;
}

.nav-item:after{
  content:'>';
  font-size:14px;
  position:absolute;
  top:50%;
  right:1em;
  transform:translateY(-50%);
}

＆＃13;

<div class="navbar">
  <div class="nav-item">
    Item 1
  </div><!-- nav-item -->
    <div class="nav-item">
    Item 2
  </div><!-- nav-item -->
    <div class="nav-item">
    Item 3
  </div><!-- nav-item -->
      <div class="nav-item">
    Item 4
  </div><!-- nav-item -->
</div><!--navbar -->

＆＃13;

＆＃13;

＆＃13;