Javascript 如何将select（选择）置于交换机旁边？

您好，我使用React.js获得了以下代码：

import React, { Component } from 'react';
import Select from "./components/Select/Select";
import Switch from "./components/Switch/Switch";

class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
          <div className="col-sm-9">
          <Select list={[...this.state.Test]}/>
          <Switch />
          </div>
          </div>
        </>
        );
}
} 

import React，{Component}来自'React'；
从“/components/Select/Select”导入选择；
从“/components/Switch/Switch”导入开关；
类应用程序扩展组件{
状态={
测试：[
{值：“0”，名称：“1”}，
]
}
render（）{
返回(
);
}
} 

其中Select.js：

import React from "react";

const selectoption = ({ list }) => (
    <select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);

export default selectoption;

从“React”导入React；
const selectoption=（{list}）=>(
{list.map（option=>（{option.name}））}
);
导出默认选择选项；

最后一个文件Switch.js：

import React from "react";

const switchoption = () => (<div className="custom-control custom-switch">
<input type="checkbox" className="custom-control-input" id="customSwitch1" />
    <label className="custom-control-label" htmlFor="customSwitch1">Slot/Map</label>
</div>);

export default switchoption;

从“React”导入React；
常量开关选项=（）=>(
槽/图
);
导出默认开关选项；

但问题是，我没有选择旁边的开关，我想

[！[我的照片][1][1]

多谢各位！

---

[1] ：

您只需将它们包装在flex容器中即可

class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
             <div className="flex">
                 <Select list={[...this.state.Test]}/>
                 <Switch />
             < /div>
          </div>
        </>
        );
}
} 

---

您可以在这里使用flexbox。类似于下面显示的代码。如果是React，请使用className而不是class。将应该相邻的div包装在一个父类中，该父类的flex direction类型为row，而每个子类的flex direction类型为column。它非常类似于表行布局

此链接非常有用：

.parent{
显示器：flex；
弯曲方向：行
宽度：100%；
}
.孩子{
显示器：flex；
弯曲方向：立柱；
}

儿童1
儿童2

一个（或两个）元素可能具有

显示：块属性在它的类定义中。如果您想在您的
选择旁边设置
开关
，请将其删除。我已选中，但没有：/Oh！您在
div
中有输入，这是一个块元素。删除div或将其显示设置为
inline
或
inline block
。我有inline block:/但它不工作检查编辑，我忘了您有``className=“col-sm-9”``这个引导类，这可能就是为什么不能让“选择”和“切换”彼此相邻的原因我认为您需要覆盖引导样式o选择，检查我的编辑
.flex{
display:flex;
width:100% ;
justify-content:space-between;
align-items:center;
}
.flex select {
 flex:1;
  display:inline;
}