0
242
Vistas¿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 Respuestas
Responde la pregunta0
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
Denunciar
0
usar flex de pantalla
<div style={{"display":"flex"}}> <span> <Select options={langOptions} /> </span> <span> <Select options={currencyOptions} /> </span> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta