如何强制标签和下拉菜单在同一行？

Question

我想强制下拉菜单和标签在同一行。我怎么能强迫这个。因为现在我得到了标签：Taste 在下拉列表上方。

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 >
    );
}

自定义下拉列表：

export default function CustomDropdown({ style, options, styleSelect, defaultValue, isMulti }) {
    return <div style={style}>
        <Select styles={styleSelect} options={options} defaultValue={defaultValue} isMulti={isMulti} />
    </div>
}

Answer 1

我要做的第一件事是将您的 'label' 包裹在段落标签中，因为从语义的角度来看，文本不应单独包裹在 div.

中

<div className="TextData"> 
  <p>Taste :</p>

  <CustomDropdown 
    style={styles.select} 
    options={TASTE} 
    defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} 
  />
</div>

其次，为了让所有内容都在同一行，您可以将 'display: flex' 添加到 TextData class。默认情况下，flexbox 中的内容在同一行。

如果您随后希望将内容水平和垂直居中，您可以将 'align-items: center' 和 'justify-content: center' 添加到相同的 div。

Answer 2

试试这个。或 display:flex

.textData {
    display:grid; 
    grid-template-columns:auto auto; 
    }

如何强制标签和下拉菜单在同一行？

How do I force label and dropdown to be on same line?

javascript

css

reactjs

react-native

react-hooks