Как совместить мат-кнопку с мат-вводом? - PullRequest
Новая
       52

Как совместить мат-кнопку с мат-вводом?

1 голос
/ 16 февраля 2020

Как я могу заставить эти два элемента правильно выровнять? Я пытаюсь сделать их идеально выровненными, но регулировка высоты кнопки просто заставляет нижнюю часть уходить дальше от нижней части поискового ввода. Я думаю, это потому, что их центр не выровнен, поэтому регулировка высоты не совсем правильное решение. enter image description here

Вот HTML

<!-- Search Box and Button-->
    <p>Search by company name:</p>
    <mat-form-field appearance="outline"> 
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search">
    </mat-form-field>

    <button mat-stroked-button color="primary">Search</button>

Вот S CSS: 

mat-form-field.mat-form-field {
    font-size: 12px;
    width: 300px;
  }

  button.mat-stroked-button {
    font-size: 14px;
    height: 42px;
    margin: 10px;
  }

1 Ответ

2 голосов
/ 16 февраля 2020

Чтобы добиться горизонтального выравнивания, вам нужно внести некоторые коррективы в разметку и использовать гибкие свойства для идеального выравнивания. Я добавил несколько div в качестве родительских, но если вы хотите, вы можете назначить CSS фактическим родительским классам вашего кода. Я добавил свой код ниже, обновите HTML и CSS соответственно: 

.searchcontainer {
          text-align:center;
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
       }

       .searchcontainer .search-part {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
       }

      mat-form-field.mat-form-field {
          font-size: 12px;
          width: 300px;
      }

      button.mat-stroked-button {
          font-size: 14px;
          height: 42px;
          margin: 10px;
      }
<div class="searchcontainer">

      <p>Search by company name:</p>

      <div class="search-part">

        <mat-form-field appearance="outline"> 
            <mat-label>Search</mat-label>
            <input matInput placeholder="Search">
        </mat-form-field>

        <button mat-stroked-button color="primary">Search</button>
      </div>

    </div>
...