html - 对齐所有按钮正确位置的问题

Question

我使用 angular material(10.2.5) 工具栏组件，我想让我的三个按钮向右，但我不能

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <h3 [style.color]="'white'">Portail admin</h3>
  <div class="parent">
    <div class="children right-children">
      <div class="child"><a mat-flat-button >Liste des livres</a></div>
      <div class="child"><a mat-flat-button >Ajouter un livre</a></div>
      <div class="child"><a mat-flat-button >Deconnexion</a></div>
    </div>
  </div>
    </mat-toolbar-row>
  </mat-toolbar>

.parent {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center; 
    justify-content: space-between; 
  }
  
  .children {
    display: flex;
  }
  
  .child {
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: #000;
  }

任何想法 ？我想将我的三个按钮对齐到工具栏的左侧，但我真的做不到。

对于我的 html 和 css 代码，我使用了 flexbox css。

标签： htmlcssflexboxangular-material

Answer 1

回答

.parent {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center; 
    justify-content: space-between; 
    
  }
  
  .children {
    display: flex;
}
  
  .child {
    margin: 0 5px;
    padding: 0 5px;
    font-size: 10px;
    color: black;
  }

.right-children{
  position:absolute;
  right:0;
}

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <h3 [style.color]="'white'">Portail admin</h3>
  <div class="parent">
    <div class="children right-children">
      <div class="child"><a mat-flat-button >Liste des livres</a></div>
      <div class="child"><a mat-flat-button >Ajouter un livre</a></div>
      <div class="child"><a mat-flat-button >Deconnexion</a></div>
    </div>
  </div>
    </mat-toolbar-row>
  </mat-toolbar>

添加：

.right-children{
position:absolute;
right:0;
}

---