如何將我的選擇放在我的開關旁邊？

Question

你好，我有這個使用 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>
        </>
        );
}
} 

其中 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;

最后一個文件 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;

但問題是我沒有像我想要的那樣在開關旁邊選擇。

[![我的照片][1]][1]

非常感謝 ！ [1]： https : //i.stack.imgur.com/CSlRi.png

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

在 CSS 中

.flex{
display:flex;
width:100% ;
justify-content:space-between;
align-items:center;
}
.flex select {
 flex:1;
  display:inline;
}

Answer 2

你可以在這里使用 flexbox。 類似於下面顯示的代碼。 在 React 的情況下，使用 className 而不是 class。 將應該彼此相鄰的 div 包裝在一個父類中，該父類具有 row 類型的 flex-direction，並且每個子類都應該具有 column 類型的 flex-direction。 它與表格行布局非常相似。

這個鏈接非常有用： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

 .parent { display: flex; flex-direction: row width: 100%; } .child { display: flex; flex-direction: column; }

 <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> </div>