语义 UI React：如何将按钮从左移到右

Question

我正在使用语义 UI React。我包括语义 UI React Button 但默认它显示在 Left 中，我想在 Right 中显示它。有人请帮我如何将语义按钮向右移动。

<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>

Answer 1

您可以通过将按钮组包装在一个容器中来实现这一点，该容器将通过 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;

看到它在这里工作：https://codesandbox.io/s/3yqy09k35m?fontsize=14

Answer 2

一个漂亮的解决方案就是将 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/

语义 UI React：如何将按钮从左移到右

Semantic UI React : How to move Button from Left to Right

javascript

reactjs

semantic-ui-react