请帮助通过按钮与 CSS 对齐答案

【问题标题】：Please help align by button with CSS请帮助通过按钮与 CSS 对齐
【发布时间】：2018-12-11 19:00:58
【问题描述】：

我正在处理一个 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 按钮如何将灰色 div 的顶部向上推几个像素，而不是占用它下方的空间。如何使按钮与其他两个控件（文本和选择输入）对齐？他们都一样高。为什么按钮坚持比其他控件高几个像素？

【问题讨论】：

当我将你的 CSS/HTML 放到 Firefox 或 Chrome 中时，我没有得到那种效果......你确定没有其他样式影响这个标记吗？
我也没有得到那种效果，它是环绕某些东西还是与 CSS 中的样式冲突？

标签： css angular button input styling

【解决方案1】：

默认情况下，表单元素显示为“inline-block”。因此，您必须为这 3 个元素定义垂直对齐属性。

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

【讨论】：