html - 右对齐元素向下移动

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

这里可能出了什么问题？

标签： htmlcsssass

Answer 1

在那些我喜欢使用display:flex选项的情况下，它非常有帮助，

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

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

如果你不知道什么是 display flex，你可以在这里好好阅读一下