如何强制Office UI Fabric ChoiceGroup水平对齐

Question

我正在尝试构建一个包含ChoiceGroup的SPFx Webpart。当我将CSS样式设置为垂直对齐时：ms-sm12

Show assigned to:
o anyone
* me
o nobody

我喜欢它们在一行中水平对齐：

Show assigned to: o anyone * me o nobody

当我将样式设置ms-sm6为时，它会将它们“混合”对齐：将Slider和Toggle设置为ms-sm3

Show assigned to: o anyone
* me
o nobody

有了ms-sm4它看起来像：

使用ms-sm3，时ms-sm2，ms-sm1看起来（标题越来越紧，并且所有选项都在一个列中：

如何强制/鼓励将选项水平呈现？

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' }]} />
   

完毕！