Реакция семантического интерфейса: как переместить кнопку слева направо

Question

Я использую семантический интерфейс React.Я включил семантическую кнопку реагирования пользовательского интерфейса, но по умолчанию она отображается слева, я хочу показать ее справа.Кто-нибудь, пожалуйста, помогите мне, как я могу переместить семантическую кнопку вправо.

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

Answer 1

Прекрасное решение - просто добавить floated="right" к вашей Button.Group следующим образом:

<Button.Group floated="right">
    <Button>Cancel</Button>
    <Button.Or />
    <Button positive>Save</Button>
</Button.Group> 

Вы также можете проверитьthis: https://codesandbox.io/s/n0wzzxxl0m

Все опции для Button.Group предоставлены здесь: https://react.semantic -ui.com / elements / button /

Answer 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