时间戳

首页 > 解决方案 > 同一行办公室 ui 织物中的 2 个元素

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

问题描述

如何在同一行显示 2 个元素？我有一个如下所示的 UI： 在此处输入图像描述 我需要在同一行显示两个元素，如下所示： 在此处输入图像描述 这是我的代码：

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

请告诉我。谢谢！

标签： office-ui-fabric

解决方案

它可以通过应用于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 容器中的项目

推荐阅读