垂直選單中沒有對齊和缺少專案-有解無憂

我想得到這個結果：

垂直選單中沒有對齊和缺少專案

目前，我沒有太多...

垂直選單中沒有對齊和缺少專案

我不明白為什么我沒有分隔每個選單標題的灰線？箭頭沒有正確對齊？

我嘗試了幾件事，但我放棄了，元素仍然沒有對齊，并且邊框底部沒有出現在每個標題上。

  @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>

專案在這里。

感謝您的幫助和時間。

uj5u.com熱心網友回復：

關于灰色分隔線和填充我認為這條規則......

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

...應該更改為具有不同的選擇器，該選擇器不適用于ul，但適用于其li子項：

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

關于向下箭頭的對齊，您可以應用這些元素，這些元素是使用上述 CSS 規則處理的元素的子元素，并應用于display: flex其最后一個子元素（= 向下箭頭）以使該元素之前的所有內容左對齊并且箭頭右對齊。換句話說，添加這個：justify-content: space-between.menulimargin-left: auto;

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445427.html

標籤：css angularjs 弹性盒

上一篇：網頁跟隨系統 dark mode （暗黑模式）的實作

下一篇：有沒有辦法在Angular中導航和回傳后保留組件的DOM狀態