css - How to force Office UI Fabric ChoiceGroup to align horizontal

Question

I am trying to build a SPFx webpart containing a ChoiceGroup. When I set the css style to ms-sm12 the choices are aligned vertical:

Show assigned to:
o anyone
* me
o nobody

I like them to align horizontal in one row:

Show assigned to: o anyone * me o nobody

When I set the style to ms-sm6, it aligns them "mixed": The Slider and Toggle are set to ms-sm3

Show assigned to: o anyone
* me
o nobody

With ms-sm4 it looks like:

With ms-sm3, ms-sm2, ms-sm1 it looks like (the title getting more and more squashed and all options in one column:

How can I force / encourage the options to be rendered horizontal?

Answer 1

请按照以下步骤操作：

1) 创建新的 .scss 文件

例如：fabric.scss 并将此类粘贴到其中。

  .inlineflex .ms-ChoiceField{
      display: inline-block;
   }

2）在您的组件中提供参考，例如：

  import  './fabric.scss';

3）添加组件并应用类。

  <ChoiceGroup 
                className="inlineflex"
                label='Pick one icon'
                options={ [
                {
                    key: 'day',                        
                    text: 'Day'
                },
                {
                    key: 'week',                        
                    text: 'Week'
                },
                {
                    key: 'month',                        
                    text: 'Month'                       
                }
                ] }
             /> 

Answer 2

另一个不需要添加 CSS 的选项是将样式直接应用于控件：

1. 将 flexContainer 样式设置为 display:flex。

2. 您会注意到选项末尾可能需要一个空格，我添加了一个不间断空格作为 \u00A0

   <ChoiceGroup selectedKey={valueType}
   styles={{ flexContainer: { display: "flex" } }} options={[
   { key: 'specific', text: 'selected\u00A0\u00A0' },
   { key: 'relative', text: 'relative' }]} />
   

完毕！

Answer 3

1. 向 ChoiceGroup 添加样式属性 styles={{ flexContainer: { display: "flex" } }}
2. 将样式属性添加到选项样式：{choiceFieldWrapper：{显示：'inline-block'，边距：'0 0 0 10px'}}

完毕！

Answer 4

const options: IChoiceGroupOption[] = [
      { key: 'conforme', text: 'Conforme'},
      { key: 'noConforme', text: 'No conforme', styles:{field: { marginLeft: "15px"}}}
    ];
<ChoiceGroup styles={{ flexContainer: { display: "flex" } }}  options={options}  />