时间戳

首页 > 解决方案 > 如何将我的选择放在我的开关旁边？

javascript - 如何将我的选择放在我的开关旁边？

问题描述

您好，我有使用 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

标签： javascripthtmlcssreactjs

解决方案

你可以在这里使用 flexbox。类似于下面显示的代码。在 React 的情况下，使用 className 而不是 class。将应该相邻的 div 包装在父类中，该父类具有行类型的 flex-direction，并且每个子类都应该具有列类型的 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>

推荐阅读