将下拉箭头移动到链接元素的右侧

Question

我在名字（姓）下有下拉箭头。我想将其移到它的右侧。箭头表示此特定链接是一个下拉列表。我想将此下拉箭头移动到已登录用户名的右侧。 （名字，姓氏）值将是动态的，具体取决于登录的用户。我尝试了一些操作，其中之一是：

HTML：

.dropdown-toggle-ellipsis::after { display: none; } 
.dropdown-toggle::after { display: none; }

CSS：

alias.js executable1

但是，这没有用。有什么建议么？我对此并不陌生，如果这个问题很简单，请您谅解。感谢您的所有帮助！

此图显示了我的导航栏中的姓氏，名字链接以及下面的箭头：

Answer 1

如果您希望下拉列表与用户名相邻，则需要使用span标记而不是div标记。 span标记创建一个内联块，并且写入其中的内容保持在同一行中。以此替换HTML。

<ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <!--Not sure about path of [routerLink]="['/login']" **make sure to check** -->
        <a class="nav-link dropdown-toggle" [routerLink]="['/login']" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          {{userName}}
        </a>
        <span class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <!--
              <a class="dropdown-item text-uppercase" href="">Profile</a>
              <a class="dropdown-item text-uppercase" href="">Settings</a>
          -->
        <a class="dropdown-item">Logout</a>
        </span>
      </li>
</ul>

希望我对您的问题理解正确，希望对您有所帮助。如果可行，请竖起大拇指。