Question

我有以下输出：

Output. 这是render方法中的代码：

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

它由自定义组件组成。我正在尝试对它们进行样式设置，以使它们并排放置，并且TextMedium组件应占据一半的空间，剩余空间应在两个组件之间平均分配。.本质上是TextMedium的50％，Select和Select的25％ TInput。

我尝试过样式设置，但似乎没有任何效果。

Answer 1

您可以使用bootstrap进行布局对齐或设置外部div {display:flex; flex-direction:row;}的样式，

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

Answer 2

使用弹性布局，如下所示：

  return (
    <Container
      style={{
        display: 'flex'
      }}>
      <Text
        style={{
          width: '50%'
        }}
      />
      <Select
        style={{
          width: '25%'
        }}
      />
      <Input
        style={{
          width: '25%'
        }}
      />
    </Container>
  );

Answer 3

您可以使用display: 'flex'和flexDirection: 'row' CSS选项在行中显示div。这是在行中显示控件的示例代码。

<div style={{
      display: 'flex',
      flexDirection: 'row',
      width: '100%',
      backgroundColor: 'lightGrey',
    }}>
      <div style={{ width: '50%' }}>
        <label style={{width: '100%'}}>Number</label>
      </div>
      <div style={{ width: '25%' }}>
        <select style={{width: '100%'}}>
          <option value="AreaCode">AreaCode</option>
        </select>
      </div>
      <div style={{ width: '25%' }}>
        <input style={{width: '100%'}} type="text" value="2343434" />
      </div>
    </div>

工作代码和框here

如何并排渲染组件

3 个答案: