'How to align icons to the right

I have a menu with a bulleted list, I would like to align an arrow type icon to the right, but the alignments are not done exactly.

Here is an image below of my problem...

image

I think the problem is here?

.sidebar .nav-links li i {
    min-width: 60px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

Here is a reproduction of the project.

HTML

<ul class="nav-links">
  <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
    <ng-container>
      <a class="item" (click)="selectMenu(menu)">
        <i [class]="menu.iconClass"></i>
        <span class="links_name">{{ menu.name }}</span>
        <i class="fa fa-chevron-down"></i>
      </a>
      <ul
        class="submenu"
        #submenu
        [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } "
      >
        <li *ngFor="let submenu of menu.submenu">
          <a routerLink="{{ submenu.url }} "
            ><span class="links_subname">{{ submenu.name }}</span>
          </a>
        </li>
      </ul>
    </ng-container>
  </li>
</ul>

CSS

.sidebar .nav-links {
    margin-top: 10px;
}

.sidebar .nav-links li {
    position: relative;
    list-style: none;
}

.sidebar .nav-links li a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s ease;
    border-bottom: 1px solid #ccc;
    padding: 13px 0;
}

.sidebar .nav-links li a.active {
    background: #081D45;
}

.sidebar .nav-links li a:hover {
    background: #081D45;
}

.sidebar .nav-links li i {
    min-width: 60px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.sidebar .nav-links .item {
    text-transform: uppercase;
}

.sidebar .nav-links li i.fa-chevron-down {
    right: 1rem;
    left: auto;
}

.sidebar .nav-links li.active i.fa-chevron-down {
    transform: rotate(180deg);
}

.sidebar .nav-links li.active i {
    color: white;
}

.sidebar .nav-links li a .links_name {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

Thank you a lot for your help.

htmlcss


Solution 1:[1]

Use this:

.sidebar .nav-links li a {
  display: flex;
  justify-content: space-between;
}

Remove the min-width: 60px; on the .navlinks li i and set flex-basis: 20%;.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions