水平对齐两个反应元素答案

【问题标题】：Horizontal align two react elements水平对齐两个反应元素
【发布时间】：2018-04-05 15:43:41
【问题描述】：

import React from 'react'
import ReactDOM from 'react-dom'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class ResultsBar extends React.Component {
...
render() {
    return (
    <div>
    <h3>
        99 results
    </h3>
    <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      {dropdown}
    </DropdownMenu>
    </Dropdown>
    <hr/>
    </div>
    );
    }
}

从上图看，组件没有水平对齐

我希望 react-strap 下拉元素在同一行的标题右侧浮动。

编辑 1： 使用 flex <div className={style.resultsBarDiv}>

.results-bar-div {
  display: flex;
  justify-content: space-between;
}

我正在尝试将 h3 和下拉菜单定位在窗口的两端，justify-content 不起作用

【问题讨论】：

这与 React 无关。只需像任何其他元素一样定位它们——要么在h3 和Dropdown 上设置display: inline-block，或者在父div 上使用display: flex，或者使用float，或者......

标签： css reactjs

【解决方案1】：

只需使用flexbox，将容器CSS 设置为display: flex，这会将所有内容放在同一行。

在将 css 应用于 ReactJs 中的组件时，请考虑使用 styled components。

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";


import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";


const divStyle = {
  display: 'flex',
  alignItems: 'center'
};

class App extends React.Component {
  state = {
    dropdownOpen: true
  }
  render() {
    return (
      <div style={divStyle}>
        <h3>99 results</h3>
        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle caret>
            Dropdown
    </DropdownToggle>
          <DropdownMenu>
          </DropdownMenu>
        </Dropdown>
      </div>
    );
  }
}

【讨论】：

我已经改变了，现在我正在尝试将下拉菜单对齐到窗口的右侧。 display: flex; justify-content: space-between; 不工作
默认情况下，弹性项目按源顺序排列。但是， order 属性控制它们在 flex 容器中出现的顺序。查看 flexbox 指南，它向您展示了使用 order: <some integer> 的示例
啊，好的，谢谢。 flex:1 和 justify-content: space-between 是我想要的

【解决方案2】：

我会用 css 应用样式。您可以直接设置下拉菜单的样式，也可以通过 className 属性为其指定一个类。用 float 或 display flex 设置样式

【讨论】：