2 элемента в одном ряду офисного UI ткани

Question

Как мне показать 2 элемента в одном ряду? У меня есть пользовательский интерфейс, как показано ниже: Мне нужно показать оба элемента в одной строке, как показано ниже: Вот мой код:

<div>     
<Dropdown           
    options={[
        { key: 'A', text: 'Option a' },
        { key: 'B', text: 'Option b' },
    ]}
/>  
</div>
<IconButton
iconProps={{ iconName: "add" }}
title={"Add"}
className={styles.rightButton}
onClick={this.addClicked}
/>              

и styles.rightButton имеет:

.rightButton {
  float: right;
  margin-bottom: 8px;
 }

Пожалуйста, дайте мне знать. Спасибо!

Answer 1

Это может быть достигнуто путем применения display: flex в контейнер, как показано ниже:

const dropDownStyles = {
  root: {
    width: "240px"
  }
};

export default class DropdownExample extends React.Component<any, any> {
  public render(): JSX.Element {
    return (
      <div style={{display:'flex'}}>
        <Dropdown
          styles={dropDownStyles}
          options={[
            { key: "A", text: "Option a" },
            { key: "B", text: "Option b" }
          ]}
        />
        <IconButton iconProps={{ iconName: "add" }} title={"Add"} />
      </div>
    );
  }
}

демонстрация

Рекомендации

Выравнивание элементов в Flex-контейнере