请帮助按按钮与CSS对齐

Question

我正在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>

当我运行它时，我得到了：

请注意“转到”按钮如何将灰色div的顶部向上推几个像素，而不是占用其下方的空间。 如何使按钮与其他两个控件（文本和选择输入）对齐？它们都是相同的高度。为什么按钮坚持要比其他控件高几个像素？

Answer 1

默认情况下，表单元素显示为“内联块”。因此，您必须为这3个元素定义vertical-align属性。

subprojects {
    if (project.name.contains("react-native-fast-image") || project.name.contains("react-native-screen")) {
        buildscript {
            repositories {
                maven { url "https://dl.bintray.com/android/android-tools/" }
            }
        }
    }
}