html - 如何并排渲染组件

Question

我有以下输出:

这是渲染方法中的代码:

return (
  <div>
    <div>
      <TextMedium fontSize="15px" text="Number" />
      <Select options={[{ label: 'AreaCode', value: 'AreaCode' }]} />
    </div>
    <div>
      <TInput placeholder={daytimePhoneNumber} />
    </div>
  </div>
);

它由自定义组件组成。我正在尝试设置它们的样式，使它们并排放置，并且 TextMedium 组件应占用一半空间，剩余空间应在两个组件之间平分。基本上 50% 给 TextMedium，25% 给 Select 和T输入。

我尝试了它的样式，但似乎没有任何效果。

Answer 1

您可以使用 bootstrap 进行布局对齐或设置外部 div 的样式 {display:flex; flex 方向:行；，

return (
  <div style={display:flex; flex-direction:row;}>
    <div>
      <TextMedium fontSize="15px" text="Number" />
      <Select options={[{ label: 'AreaCode', value: 'AreaCode' }]} />
    </div>
    <div>
      <TInput placeholder={daytimePhoneNumber} />
    </div>
  </div>
);