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 后，将在控制外部显示，如下所示。

作为替代解决方案，

如果我增加select标签的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

antd下拉菜单：所选值显示在select之外

1 个答案: