Пожалуйста, помогите выровнять по кнопке с CSS - PullRequest
Новая
       27

Пожалуйста, помогите выровнять по кнопке с CSS

0 голосов
/ 11 декабря 2018

Я работаю над проектом Angular 6 и у меня проблемы со стилем кнопки.

Вот мой код: 

.endpointBox {
  width: 100%;
  padding: 0; //7px;
  background-color: #EEE;
  border: #AAA solid 1px;
  border-radius: 3px;
  overflow: auto;
}

.methodSelect {
  width: 200px;
  height: 30px;
  background-color: white;
  border: #AAA solid 1px;
  border-radius: 3px;
  margin: 0;
  padding: 0;
}

.urlBox {
  background-color: white;
  border: #AAA solid 1px;
  width: 300px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
}

.goButton {
  width: 50px;
  height: 30px;
  background-color: white;
  border: #AAA solid 1px;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  text-align: center;
}
<div class="endpointBox">

  <mat-select [(value)]="selectedMethod" class="methodSelect">
    <mat-option value="GET">GET</mat-option>
    <mat-option value="POST">POST</mat-option>
  </mat-select>

  <input matInput type="text" placeholder="Enter request URL" class="urlBox" />

  <button matButton (click)="go_clicked()" class="goButton">Go</button>
</div>

Когда я запускаю это, я получаю это:

Go button out of alignment

Обратите внимание, каккнопка Go сдвигает верхнюю часть серого элемента вверх на несколько пикселей, а не занимает место под ним.Как я могу заставить кнопку быть выровненной с двумя другими элементами управления (текст и выбрать входы)?Они все одинаковой высоты.Почему кнопка настаивает на том, чтобы находиться над другими элементами управления на несколько пикселей?

1 Ответ

0 голосов
/ 11 декабря 2018

По умолчанию элементы формы отображаются как «встроенный блок».Таким образом, вы должны определить атрибут вертикального выравнивания для этих 3 элементов.

.methodSelect, .urlBox, .goButton{ vertical-align:top }
...