Question

我在左侧放置了一些元素，在右侧放置了一些元素。

但是对齐的右侧元素向下放置，并且与左侧元素不在同一行。

.mat-table-container {
  position: relative;
}

.mat-table-container .mat-table-button-wrapper {
  height: 50px;
  padding-left: 0em;
  padding-top: 1em;
}

.mat-table-container .mat-table-button-wrapper #left-aligned-wrapper {
  float: left;
}

.mat-table-container .mat-table-button-wrapper #right-aligned-wrapper {
  float: right;
}

<div class="mat-table-container">
  <div class="mat-table-button-wrapper">
    <div id="left-aligned-wrapper">
      <button class="btn btn-primary"> 
                Left Button
            </button>
    </div>
    <div id="right-aligned-wrapper">
      <mat-form-field appearance="standard">
        <input matInput placeholder="Placeholder">
      </mat-form-field>
      <button type="button" mat-button>
              Right Button
            </button>
      <button class="btn btn-default">
              <i class="my-icon my-icon-filter"></i>
            </button>
    </div>
  </div>
</div>

Stackblitz：https://stackblitz.com/edit/angular-5r6u3p-nabsuj

这里可能出什么问题了？

Answer 1

在这种情况下，我喜欢使用display:flex选项，这非常有帮助，

我的解决方案：https://stackblitz.com/edit/angular-5r6u3p-6zfzaj

我所做的更改是在datepicker-value-example.css中，我使用flex将按钮和日期选择器垂直对齐，并使用margin-right / margin-left：auto使其保持在右侧，而左。

如果您不知道什么是display flex，则可以很好地了解它here

Answer 2

此代码可以帮助您...

.mat-table-button-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

  <div class="mat-table-button-wrapper">
    <div id="left-aligned-wrapper">
      <button class="btn btn-primary"> 
                Left Button
            </button>
    </div>
    <div id="right-aligned-wrapper">
      <mat-form-field appearance="standard">
        <input matInput placeholder="Placeholder">
      </mat-form-field>
      <button type="button" mat-button>
              Right Button
            </button>
      <button class="btn btn-default">
              <i class="my-icon my-icon-filter"></i>
            </button>
    </div>
  </div>
</div>

右对齐元素向下移动

2 个答案: