我想对齐输入,它有两个标签和一个没有任何标签的按钮,以便它们都在同一级别。
这是期望的效果:
这是我到目前为止得到的:
我通过在按钮前添加带有空白空间的标签,设法让它看起来像我想要的样子,但这并不理想。
代码如下:
<Form>
<Form.Group widths='four'>
<Form.Field>
<Form.Input type='number' label='Input'/>
<label>We can't find any matches.</label>
</Form.Field>
<Form.Field>
<Button primary>Search</Button>
</Form.Field>
</Form.Group>
谢谢你的帮助
编辑:这是 CodeSandbox 的链接:https://codesandbox.io/s/v6kkmyzyr0
最佳答案
我认为这是一个样式问题,它取决于您使用的设计框架(如果您使用的话)。
回答您的问题,您可以使用 flex 水平对齐项目 这是代码:https://codesandbox.io/s/1oro0o6943
import React from "react";
import { render } from "react-dom";
import { Button, Form } from "semantic-ui-react";
const App = () => (
<Form>
<Form.Group widths="four" style={{ display:"flex", flexDirection:"row", alignItems:"center", }}>
<Form.Field>
<Form.Input type="number" label="Input" />
<label>We can't find any matches.</label>
</Form.Field>
<Form.Field>
<Button primary>Search</Button>
</Form.Field>
</Form.Group>
</Form>
);
render(<App />, document.getElementById("root"));
我已经使用内联样式实现了它,但您可以通过多种方式来管理它!
关于reactjs - 将带有标签的输入与没有标签的按钮对齐(垂直),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54713981/