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;
}

并在所需的元素中使用

CSS：将除最后一个以外的所有列表元素居中

2 个答案: