antd 下拉菜单：选择的值显示在选择之外

Question

我的代码我正在使用 ant Design (antd)。在我的下拉列表中，我使用<span> 标签将我的列表显示为两列。

<Select value={'AccountID'} style={{'width':'212px','height':'32px'}}  placeholder="Select An Accounts">
                    <Option disabled value='0'>Select An Account</Option>
                        {this.props.accountList.length && this.props.accountList.map((value,index)=>(
                          <Option  value={value.AccountID} key={index}>
                           {value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
                          </Option>
                        ))}
                    </Select>

问题是当我选择一个长选项时，例如 运费和运输成本 ，选择CostOfGoodsSold后在控件外显示如下图。

作为替代解决方案，

如果我增加选择标签的with：-

选择后两个值之间没有空格。我需要值之间的空间。

如何解决这个问题？ PS：未应用任何其他 CSS。 演示：sandbox

Answer 1

根据您的要求，我想使用百分比来解决您的问题，

在 antd 中有一个名为 dropdownStyle 的属性，您可以使用它来设计下拉菜单的选项。

所以，通过应用

 dropdownStyle={{ minWidth: "50%", height: "32px" }}

您应该能够添加选项。

这是您的选择的样子

<Select
    placeholder="Select An Account"
    dropdownStyle={{ minWidth: "50%", height: "32px" }}
    style={{ minWidth: "50%", height: "32px" }}
  >
    <Option value="1">
      Freight and Shipping Cost
      <span style={{ float: "right" }}> Cost of Goods Sold</span>
    </Option>
    <Option value="2">
      Sales
      <span style={{ float: "right" }}> Income</span>
    </Option>
  </Select>

选择下拉列表后，我找不到要覆盖的属性，因此您需要对其应用 css。对于选定的项目。

.ant-select-selection-selected-value {
  width: 100%;
}

Demo of sandbox