垂直菜单中没有对齐和缺少项目

Question

我想得到这个结果：

目前，我没有太多...

我不明白为什么我没有分隔每个菜单标题的灰线？箭头没有正确对齐？

我尝试了几种方法但我放弃了，元素仍然没有对齐并且 border-bottom 没有出现在每个标题上。

  @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    h1 {
        font-size: 58px;
    }
    
    h2 {
        font-size: 30px;
    }
    
    ul {
        list-style-type: none;
    }
    
    .sidebar {
        position: fixed;
        height: 100%;
        width: 250px;
        background: #239cd3;
        transition: all 0.5s ease;
    }
    
    
    /* LOGO */
    
    .sidebar .logo-details {
        height: 100px;
        display: flex;
        align-items: center;
    }
    
    .sidebar .accordion {
        font-size: 18px;
        color: white;
        border-bottom: 1px solid #ccc;
        padding: 15px 15px 15px 25px;
    }
    
    .sidebar .accordion li i.fa-chevron-down {
        right: 1rem;
        left: auto;
    }
    
    .sidebar .accordion li.active i.fa-chevron-down {
        transform: rotate(180deg);
    }

    <div class="sidebar" style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }">
        <div class="logo-details" style="border-bottom: 1px solid black;">
            <span class="logo_name">
          </span>
        </div>
        <ul id="accordion" class="accordion">
            <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
                <ng-container>
                    <div class="menu" (click)="selectMenu(menu)">
                        <i [class]="menu.iconClass"></i> {{ menu.name }}
                        <i class="fa fa-chevron-down"></i>
                    </div>
    
                </ng-container>
            </li>
        </ul>
    </div>

项目是here。

感谢您的帮助和时间。

Answer 1

关于灰色分隔线和填充我认为这个规则...

.sidebar .accordion {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

...应该更改为具有不同的选择器，该选择器不适用于 ul ，但适用于其 li children:

.sidebar .accordion > li {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

关于向下箭头的对齐方式，您可以将 display: flex 和 justify-content: space-between 应用于 .menu 元素，即 li 元素的 children使用上面的 CSS 规则解决，并将 margin-left: auto; 应用到它的最后一个 child（= down-arrow）以获得 left-aligned 和箭头 right-aligned。换句话说，添加：

.sidebar .accordion > li .menu {
    display: flex;
    justify-content: space-between;
}
.sidebar .accordion > li .menu > i.fa.fa-chevron-down {
    margin-left: auto;
}

垂直菜单中没有对齐和缺少项目

No alignment and missing item in a vertical menu

css

angularjs

flexbox