如何強制標簽和下拉菜單位於同一行？

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

我要做的第一件事是將您的“標簽”包裝在段落標簽中，因為從語義的角度來看，文本不應僅包裝在 div 中。

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

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

其次，為了讓所有內容都在同一行，您可以在 TextData 類中添加“display: flex”。 默認情況下，flexbox 中的內容在同一行。

如果你希望你的內容水平和垂直居中，你可以將'align-items：center'和'justify-content：center'添加到同一個div。

Answer 2

嘗試這個。 或顯示：彈性

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