Quiero forzar que el menú desplegable y la etiqueta estén en la misma línea. ¿Cómo puedo forzar esto? Porque por ahora tengo la etiqueta: Taste encima del menú desplegable.
export default function MenuItemDisplay() { ... return ( <div> ... <div className="TextData"> Taste : <CustomDropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} /> </div> ... </div > ); }Menú desplegable personalizado:
export default function CustomDropdown({ style, options, styleSelect, defaultValue, isMulti }) { return <div style={style}> <Select styles={styleSelect} options={options} defaultValue={defaultValue} isMulti={isMulti} /> </div> }Lo primero que haría sería envolver su 'etiqueta' en etiquetas de párrafo, porque desde el punto de vista de la semántica, el texto no debe envolverse únicamente en un div.
<div className="TextData"> <p>Taste :</p> <CustomDropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} /> </div>En segundo lugar, para que todo esté en la misma línea, puede agregar 'display: flex' a la clase TextData. De forma predeterminada, el contenido dentro de un flexbox está en la misma línea.
Si luego desea centrar su contenido horizontal y verticalmente, puede agregar 'elementos alineados: centro' y 'justificar contenido: centro' al mismo div.
Prueba esto. o pantalla:flex
.textData { display:grid; grid-template-columns:auto auto; }