我希望这些项目水平对齐

Question

我正在使用react-bootstrap，并在div中放入3个项目。你觉得没什么特别的。除了水平对齐完全没有打击。

我可以通过改变很多css来修复它，但我想先了解为什么会发生这种情况。我想我错过了一些基本的东西。

阵营

<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>

Answer 2

您可以使用Bootstrap网格布局来连续对齐项目。 https://react-bootstrap.github.io/components.html#page-layout

只需使用React-Bootstrap中的<Row>和<Col>。

Answer 3

只需提供.inline个元素height:100%;，即可获得完全父母的身高：

.inline {
  display: inline-block;
  height: 100%;
}

.InputRow {
  height: 32px;
}

<强>演示：

.inline {
  display: inline-block;
  height: 100%;
}

.InputRow {
  height: 32px;
}

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