Semantic UI React：如何将按钮从左向右移动答案

【问题标题】：Semantic UI React : How to move Button from Left to RightSemantic UI React：如何将按钮从左向右移动
【发布时间】：2019-03-13 20:14:28
【问题描述】：

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

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

【问题讨论】：

那么你想让整个按钮组出现在右侧吗？或者你想切换标签？还是想左边是绿色，右边是灰色？
@grenzbotin 谢谢你的评论。其实我想把整个按钮组向右移动。

标签： javascript reactjs semantic-ui-react

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

确保将定义类的 css 文件（在本例中为“.rightAlign”，但您可以随意命名该类）导入到您使用的文件中。意味着 - 如果您想为 Button 组件拥有自己的 css 文件，请导入 css 文件。（您可以看到我在 styles.css 中定义了 .rightAlign 类，该类被导入到代码和框中的 index.js 中。）
其实我是通过styled-component实现的，但是什么也没发生
我用一个用 styed-components 构建的工作容器更新了代码框。 codesandbox.io/s/3yqy09k35m?fontsize=14
非常感谢您的评论，问题已解决！ .