如何在一行中做出两个下拉菜单的反应？答案

【问题标题】：How to make two dropdowns in one line in react?如何在一行中做出两个下拉菜单的反应？
【发布时间】：2022-01-13 03:07:54
【问题描述】：

我不知道我做错了什么，但是这两个下拉菜单没有在一行中呈现，请有人帮我在一行中呈现它们

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Select from 'react-select';

function NavForRest() {

    const langOptions = [
                    { value: 'EN', label: 'EN' },
                    { value: 'HINDI', label: 'HINDI' },
                    { value: 'SANSKRIT', label: 'SANSKRIT' }
    ]
    
    const currencyOptions = [
                    { value: 'INR', label: 'INR' },
                    { value: 'INR', label: 'INR' },
                    { value: 'AUD', label: 'AUD' }
                    ]

    return (
            <div className="d-flex flex-row justify-content-between w-80 mt-0 mb-0" style={{"width":"80%", "margin":"auto"}}>

                <div style={{"display":"inline"}}>
                    <span>
                         <Select options={langOptions} />
                    </span>
                    <span>
                        <Select options={currencyOptions} />
                    </span>
                </div>
                </div>
    )
}

export default NavForRest;

这是输出

output image

【问题讨论】：

react-select 可能是一个 div。您需要在 CSS 中覆盖其样式（使用检查元素查找选择框使用的类名）；或将覆盖类名传递给选择组件（取决于组件是否支持）。

标签： javascript html css reactjs dropdown

【解决方案1】：

使用显示弹性

<div style={{"display":"flex"}}>
            <span>
                 <Select options={langOptions} />
            </span>
            <span>
                <Select options={currencyOptions} />
            </span>
        </div>

【讨论】：

【解决方案2】：

1) 您可以在此处使用flexbox 并将样式设置为一行

这是可行的，因为默认情况下flex-direction 是row，所以你只需添加display: flex，它就会排成一行

现场演示

<div style={{ display: "flex" }}>

EXTRA INFORMATION: You can also use gap property to add some space in between flex-items

<div style={{ display: "flex", gap: "1rem" }}>

2) 因为您也在这里使用bootstrap，所以您只需添加d-flex 类，仅此一项就可以了。

【讨论】：