Question

如何将标题和按钮对齐在同一行，但按钮应该在页面的右侧，标题应该在页面的左侧

HTML

<mat-card>
  <h1>Simple card</h1>
  <button mat-icon-button>
    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
  </button>
   <button mat-fab>Basic</button>
</mat-card>

Demo

Answer 1

您可以通过添加此HTML / CSS代码

来使用位置：绝对

<强> HTML

<mat-card>
  <h1>Simple card</h1>
  <div class="buttons">
    <button mat-icon-button>
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
    </button>
    <button mat-fab>Basic</button>
  </div>
</mat-card>

<强> CSS

.mat-card{ position: relative }

h1{ margin-right: 120px; }

.buttons{
  position: absolute;
  top:50%;
  right: 0;
  width: 120px;
  transform: translateY(-50%);
}

Answer 2

使用 flexbox 也会将按钮和文字对齐为垂直中心。

Guide for flexbox

<强> HTML

<mat-card>
    <h1>Simple card</h1>
    <div class="buttons">
        <button mat-icon-button>
            <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
        </button>
        <button mat-fab>Basic</button>
    </div>
</mat-card>

<强> CSS

h1 {
    margin: 0;
}
.mat-card { 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Demo

我如何对齐按钮左侧？

2 个答案: