Question

我确定我错过了一些简单的内容，但我想让我的字体很棒的图标排在＆＃39;用户名的右侧。

我的HTML看起来像这样：

<div class="vue-dropdown">
  <div>
    USERNAME
    <i aria-hidden="true" class="icon-caret-right"></i>
  </div>
  <div class="options"><a href="/admin" target="_blank">Admin</a><a href="/impersonate/search/" target="_blank">Impersonate</a></div>
</div>

我有一些CSS设置，在显示下拉菜单时将图标旋转为朝下 - 但图标显示在用户名下。

.vue-dropdown {
  position: relative;
  display: inline-block;
}

.options {
  display: none;
  position: absolute;
  right: 0;
  min-width: 125px;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px #c3c3c3;
  z-index: 1;
  max-height: 11em;
  height: auto;
}


/* Links inside the dropdown */

.options a {
  background-color: white;
  color: black!important;
  display: block;
  padding: 8px;
  height: auto;
  border-bottom: 1px solid #ddd;
}


/* Change color of dropdown links on hover */

.options a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu on hover */

.vue-dropdown:hover .options {
  display: block;
}

.vue-dropdown:hover .icon-caret-right {
  color: red;
  display: block;
  transition: 0.5s;
  width:10px;
  height:10px;
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.vue-dropdown .icon-caret-right {
  display: block;
  transition: 0.5s;
  width:10px;
  height:10px;
}

我有fiddle of it here

Answer 1

您只需将显示从块更改为内嵌块，如下所示（附带工作小提琴）。

.vue-dropdown:hover .icon-caret-right {
  display: inline-block;
}

.vue-dropdown .icon-caret-right {
  display: inline-block;
}

https://jsfiddle.net/knfxvw96/3/

Answer 2

这里是小提琴：https://jsfiddle.net/derrysan7/knfxvw96/1/

只需将USERNAME包裹在span代码中，添加display:inline-block，然后将display:inline-block添加到图标的i代码

无法在用户名旁边输入字体真棒图标

2 个答案: