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 下拉元素在同一行的标题右侧 float 。
编辑 1:使用 flex
<div className={style.resultsBarDiv}>
.results-bar-div {
display: flex;
justify-content: space-between;
}
我试图将 h3 和下拉菜单放置在窗口的两端,
justify-content
不工作
最佳答案
只需使用 flexbox , 将容器 CSS 设置为具有 display: flex
这会将所有内容放在同一行上。
考虑使用 styled components一般将 css 应用于 ReactJs 中的组件时。
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>
);
}
}
关于css - 水平对齐两个 react 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49676451/