如何将Label添加/对齐到语义UI DropDown控件

Question

这应该很简单，但我找不到一个简单的解决方案。我只是希望在我的DropDown State选项旁边有一个“State”标签，就像在指定Label的Control中一样。

有没有办法做到这一点？

我尝试过使用但是当我设置下拉菜单的fluid属性时它不起作用。

              <Grid.Row>   
                <Grid.Column width={8} >
                <Form.Field inline>
                <Input width="600px" fluid readOnly={checkInputActive(city)} label="City"  name="city" placeholder="Enter your City" value={city}  onChange={onCityChange} />
                </Form.Field>
                </Grid.Column>
                <Grid.Column verticalAlign="middle">
                   <Icon size="big" color="green" name="edit outline" />
                </Grid.Column>
            </Grid.Row>
            <Grid.Row>   
                <Grid.Column width={8} >
        <Form.Field inline>
       <Label>State</Label>
        <Dropdown labeled value={stateLocation} label="State" fluid inline search options={stateOptions} selection placeholder="Select your State" />
        </Form.Field>
        </Grid.Column>
        <Grid.Column verticalAlign="middle">
        <Icon name="edit outline" />
        </Grid.Column>
        </Grid.Row>

看看这个外观的截图。我只想让标签与City输入字段一样显示：

Answer 1

下拉组件当前不支持标签，但您仍然可以使用此功能获得相同的效果

<Input
  label="Country"
  fluid
  input={
    <Dropdown
      placeholder="Select Country"
      fluid
      search
      selection
      options={countryOptions}
      style={{
        borderRadius: "0 4px 4px 0"
      }}
    />
  }
/>

您需要手动设置边框半径，因为它不会附加到标签，因为它当前不受支持。

https://codesandbox.io/s/6yk4k02myr?module=%2Fexample.js