HTML选择框 - 如何强制禁用选择以保持其最宽的子宽度？

Question

我无法对齐包含“角色”行的表单，可以通过下拉列表选择框进行分配。问题是某些角色是“只读”，因此它们在表单中被禁用（下图中的前两行被禁用）：

我发现问题在于禁用的行不会呈现其他可用选项。我想知道是否有一些方法强制选择框保持其子项的宽度，即使它被禁用或我是否必须做一些黑客以确保启用和禁用选择框的宽度均匀？

提前感谢您提出的任何建议！

Answer 1

我只想指定一个固定宽度：

<select name="my_select_1" style="width:150px;">
   <option value="aaa">aaa</option>
   <option value="bbb">bbb</option>
   <option value="ccc">ccc</option>
</select>

Answer 2

首先感谢您的建议。

我通过在每个“列”中添加类名来解决问题（“角色”，“名称”和“减号”按钮可以在问题的图像中看到）：

<!-- Container to hold single row of "roles", "names" and "remove" button -->
<div className="role-field-row" key={_.uniqueId("row")} >

    <!-- Added className (React) 'left-col' -->
    <FormGroup className="on-left left-col">
        <ControlLabel>Role</ControlLabel>
        <FormControl className="form-control dropdown">
          { this.getRoleGroupOptions(roleGroup, personRole) }
        </FormControl>
    </FormGroup>

    <!-- Added className 'middle-col' -->
    <AutoSuggestField className="middle-col" />

    <!-- Added className 'right-col' -->           
    <FormGroup className="on-right right-col">
      <ControlLabel>&nbsp;</ControlLabel>
      <ButtonGroup  bsClass="role-remove-container">
        <Button bsSize="xsmall" disabled={ this.props.readOnly }>
          <Glyphicon glyph="minus" />
        </Button>
      </ButtonGroup>
    </FormGroup>
  </div>

然后我添加了以下样式规则

.role-field-row{
  display: flex;
  justify-content: space-between;
}

.role-field-row div.left-col{
  width:45%;
}

.role-field-row div.middle-col{
  width:50%;
}

.role-field-row div select{
  width:100%;
}

请注意我正在使用反应，因此某些属性，例如“className ='xxx'”在浏览器中呈现为“class ='xxx'”。这些变化的最终结果产生了这个：