Выровненные вправо элементы смещены вниз

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

Этот код может помочь вам ...

.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>

Answer 2

В таких случаях мне нравится использовать опцию display:flex, это очень полезно,

мое решение: https://stackblitz.com/edit/angular-5r6u3p-6zfzaj

изменение, которое я сделал, было в datepicker-value-example.css Я использовал flex, чтобы выровнять по вертикали кнопку и средство выбора даты, и использовал margin-right / margin-left: auto, чтобы заставить их придерживаться вправо и влево.

, если вы не знаете, какой дисплейFlex, вы можете прочитать об этом здесь