我希望这些项目水平对齐

Question

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

我可能可以通过更改很多 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 的 <Row> 和 <Col>-Bootstrap。

Answer 3

只要给你的 .inline 元素 height:100%; 就可以得到完整的 parent 的高度：

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

我希望这些项目水平对齐

I expect these items to align horizontally

html

css

react-bootstrap