我正在使用语义UI React。我包含了语义UI React Button,但默认它显示在Left中,我想在Right中显示它。有人请帮助我如何将语义按钮向右移动。
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
漂亮的解决方案就是将floated="right"
添加到你的Button.Group中:
<Button.Group floated="right">
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
您也可以查看:https://codesandbox.io/s/n0wzzxxl0m
Button.Group的所有选项都在这里提供:https://react.semantic-ui.com/elements/button/
您可以通过将按钮组包装在一个容器中来实现这一点,该容器将通过css将其子项与右侧对齐。
CSS:
.rightAlign {
display: flex;
justify-content: right;
}
包装容器中的按钮组件:
import React from "react";
import { Button } from "semantic-ui-react";
const MyButtons = () => {
return (
<div className="rightAlign">
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
</div>
);
};
export default MyButtons;