css - 复选框标签全宽

Question

我有一个 <Checkbox>包裹在 <FormControlLabel> 中的组件.它们被放置在这样的容器中:

<FormGroup row={true} key={option.id}>
  <FormControlLabel
    className="ContractOfferOptionsSelector__option"
    key={option.id}
    control={
      <Checkbox checked={option.selected} onChange={this.handleChange} value={String(option.id)} />
    }
    label={this.renderLabel(option)}
  />
</FormGroup>

private renderLabel(option: ISelectableOption) {
    return (
      <div className="ContractOfferOptionsSelector__option">
        <span className="ContractOfferOptionsSelector__option__title">
          <span className="ContractOfferOptionsSelector__option__title__abbreviation">{option.abbreviation}</span>
          <span className="ContractOfferOptionsSelector__option__title__description">{option.description}</span>
        </span>
        <span className="ContractOfferOptionsSelector__option__price">
          {`${formatCurrency(option.price.priceInclVat)} ${t(option.price.currency)}`}
        </span>
      </div>
    )
  }

标签呈现为 <span>并“紧密”包裹内容(因此它不会占用容器的整个宽度)。我在标签内放置了多个元素(价格、标题...)，并希望标签占据整个宽度，以便元素在整个宽度上间隔开。

我试过了 .ContractOfferOptionsSelector__option {width: 100%;}但它不起作用，因为父级也是 <span> ？使用动态生成的类名...

material-ui中如何控制标签的宽度？

Answer 1

<span>有一个默认值 inline显示属性。

Inline elements:
- Respect left & right margins and padding, but not top and bottom
- Cannot have a width and height set

尝试设置display: inline-block给你的<span>并添加 position: relative到 FormGroup容器。