0
244
Views¿Cómo hacer dos menús desplegables en una línea en reaccionar?
No sé qué estoy haciendo mal, pero estos dos menús desplegables no se muestran en una sola línea, por favor, que alguien me ayude a representarlos en una sola línea.
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;Aquí está la salida
·
Juan Pablo Isaza
2 answers
Answer question0
1) Puede usar flexbox aquí y diseñar en una sola línea como
Esto funciona porque, de forma predeterminada flex-direction es una row , por lo que solo tiene que agregar display: flex y se organizará en una sola línea.
Demo en vivo
<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) Dado que también está utilizando bootstrap aquí, solo tiene que agregar la clase d-flex y esto solo funcionará.
·
Juan Pablo Isaza
Report
0
usar flex de pantalla
<div style={{"display":"flex"}}> <span> <Select options={langOptions} /> </span> <span> <Select options={currencyOptions} /> </span> </div>
·
Juan Pablo Isaza
Report
Answer question