html - 我希望这些元素水平对齐

Question

我正在使用 react-bootstrap，并将 3 个元素放在一个 div 中。没有什么花哨的，你想。除了水平对齐完全不正常。

我可能可以通过更改大量 css 来修复它，但我想首先了解为什么会发生这种情况。我想我缺少一些基本的东西。

react

<div className="InputRow">
  <Label className="inline">New customer: </Label>
  <Field className="inline" onChange={() => this.onChange()} />
  <Button className="inline">Ok</Button>
</div>

CSS

.inline 
{
    display: inline-block;
}
.InputRow
{
    height: 32px;
}

Answer 1

尝试使用 flexbox

.InputRow {
  display: flex;
  align-items: center;
  height: 32px;
}

<div className="InputRow">
  <Label>New customer: </Label>
  <Field onChange={() => this.onChange()} />
  <Button>Ok</Button>
</div>