我有一个'Origin: http://snafu.com'包裹在<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%;}而无法正常工作吗？具有动态生成的类名...
如何在material-ui中控制标签的宽度？
答案 0 :(得分：0)
<span>具有默认的inline显示属性。
内联元素：
-尊重左右边距和填充，但不要遵守顶部和底部
-无法设置宽度和高度
尝试将display: inline-block设置为<span>并将position: relative添加到FormGroup容器中。