同一行办公室ui织物中的2个元素

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>
    );
  }
}

Demo

参考

Aligning Items in a Flex Container