CSS：將除最后一個之外的所有列表元素居中

Question

我正在嘗試創建一個包含標題、一些按鈕和用戶名的導航欄。 我試圖將按鈕與中心對齊，將用戶名向右對齊，而標題保持在左側。 無論我嘗試什么，我都無法讓它發揮作用。 它要么將按鈕和用戶名居中，要么將它們全部向左對齊。

我感覺一些沖突的樣式導致了問題，但是我不確定並且想知道是否有人可以幫助我。

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

a {
  text-decoration: none;
  color: white;
}
a:hover,
a:active {
  color: lightgray;
}

.icon {
  display: inline-block;
  height: 30px;
  margin: 0 auto;
  padding-right: 15px;
  text-align: center;
  vertical-align: middle;
  width: 15%;
}
.label {
  display: inline-block;
  line-height: 30px;
  margin: 0;
  width: 85%;
}
#footer {   
  position:fixed;
     left:0px;
     bottom:0px;
     height:40px;
     width:100%;
     background: white;
}
#menu
{
      width: 100%;
      margin: 0;
      padding: 20px 0 0 0;
      list-style: none;  
      display: inline-block;
}
#menu > li:last-child{
  float: right;

}

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <mat-nav-list>
      <a mat-list-item [routerLink]="['post/list']">
        <mat-icon class="icon">forum</mat-icon>
        <span class="label">Posts</span>
      </a>
      <a mat-list-item [routerLink]="['news']">
        <mat-icon class="icon">chrome_reader_mode</mat-icon>
        <span class="label">News</span>
      </a>
      <a mat-list-item [routerLink]="['about']">
        <mat-icon class="icon">dashboard</mat-icon>
        <span class="label">About</span>
      </a>
      <a mat-list-item>
          <mat-icon class="icon">output</mat-icon>
          <button (click)="logout()">Logout</button>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <div fxHide.gt-xs>
        <button mat-icon-button (click)="sidenav.toggle()">
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div>
        <a [routerLink]="['']">
          BRICKER
        </a>
      </div>
      <div fxFlex fxHide.xs>
        <ul fxLayout fxLayoutGap="20px" id="menu">
          <a mat-list-item [routerLink]="['post/list']">
            <mat-icon class="icon">forum</mat-icon>
            <span class="label">Posts</span>
          </a>
          <li>
            <a mat-list-item [routerLink]="['news']">
              <mat-icon class="icon">chrome_reader_mode</mat-icon>
              <span class="label">News</span>
            </a>
          </li>
          <li>
            <a [routerLink]="['about']">
              <mat-icon class="icon">dashboard</mat-icon>
              <span class="label">About</span>
            </a>
          </li>
          <li>
            <span *ngIf="(loggedInUser$ | async) as user" class="label"> <button mat-button [matMenuTriggerFor]="menu"
                style="font-size:24px;">{{user}}</button>
              <mat-menu #menu="matMenu">
                <button mat-menu-item [routerLink]="['post/owned']">My Posts</button>
                <button mat-menu-item (click)="logout()">Logout</button>
              </mat-menu>
            </span>
          </li>
        </ul>
      </div>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

您是否期望這樣：

 li:last-child { color: lime; background-color: black; text-align:left; /*change this if you want to align right */ padding: 5px; } li{ text-align:center; list-style:none; } 

 <ol> <li>one</li> <li>two</li> <li>Three</li> </ol> <ol> <li>four</li> <li>five</li> <li>six</li> </ol> 

Answer 2

您可以創建類似以下的類：

.right  {
  text-align: right !important;
}

.left  {
  text-align: left !important;
}

並在您想要的元素中使用它們