如何在 vue.js 顶部导航栏的右侧添加内容和图标？

Question

我开发了一个固定在顶部的顶部导航栏，我正在尝试将右侧图标和一些内容添加到顶部导航栏 [like this]1带有两个图标，并在配置文件和购物车等内容下方必须在右侧顶部导航栏内，我正在尝试解决此问题，但没有发生请帮助我解决此问题 .

Dashboard.vue

<template>
<div class="main">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <img src="../assets/education.png"  alt="notFound" />
        </div>
        <ul class="nav navbar-nav">
            <li>
                <p>Bookstore</p>
            </li>
        </ul>
        <div class="input-group">
            <i class="fas fa-search"></i>
            <div class="form-outline">
                <input type="search"  class="form-control" placeholder='search...' />
            </div>
        </div>
        <ul class="nav navbar-nav navbar-right">
             <li><a> <i class="far fa-user"></i></a></li>
             <p>profile</p>
             <li><a><i class="fas fa-cart-plus"></i></a></li>
             <p>cart</p>
         </ul>
    </nav>

</div>
</template>
<style lang="scss" scoped>
@import "colors";
.navbar-default {
    background: $redish_brown;
    height: 60px;
}
li p {
    margin-top: 5px;
    margin-left: -1250px;
    width: 91px;
    height: 26px;
    text-align: left;
    font: normal normal normal 18px/26px Roboto;
    letter-spacing: 0px;
    color: $pale_white;
    text-transform: capitalize;
    opacity: 1;
}
img {
    background: transparent 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 31px;
    height: 24px;
    margin-top: -12px;
    margin-left: 194px;
}
.input-group{
    margin-left:345px;
}
input[type="search"]{
    width: 490px;
    height: 33px;
    margin-top:-40px;
    background: #FCFCFC 0% 0% no-repeat padding-box;
    border-radius: 3px;
    margin-left:3px;
    opacity: 1;
}

// .fa-user{
//     margin-left:1064px;
//     width: 31px;
//     height: 36px;
//     opacity: 1;
//     margin-top:-25%;
// }
.input-group {
  display: flex;
  align-items: center; // to center the icon vertically
}

.input-group .fas {
  position: absolute;
  margin-left: 8px;

}
.fa-search{
    margin-top:-40px;
     opacity: 1;
}
.input-group input[type="search"] {
  padding: 8px 8px 8px 32px;
}
 a i{
    // display:flex;
    float:right;   
    
}
</style>

Answer 1

由于导航栏固定在顶部，所以你可以使用

ul{
    position: absolute;
    display: flex;
    right: 0;
    flex-direction: row !important;  // because navbar-nav direction set to column
    gap: 1rem;
    margin-right: 1rem;
}