Fabric UI 复选框标签对齐

Question

我正在尝试将复选框添加到 Excel 加载项任务窗格，但即使使用直接复制和粘贴来自 MS 站点的示例代码，复选框的标签也会打开下面的行。如何使文本与复选框位于同一行？

<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
    <span class="ms-Label">Checkbox</span> 
  </label>
</div>

任务窗格足够宽，但标签始终显示在下面的行中。

Answer 1

为 .ms-Checkbox 设置 CSS 属性，其中 display: flex; 这将默认为行布局，这将使 .ms-Checkbox 的子级显示内联。

.ms-CheckBox {
  display: flex;
}

<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" rel="stylesheet"/>
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" rel="stylesheet"/>

<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
    <span class="ms-Label">Checkbox</span> 
  </label>
</div>

Fabric UI 复选框标签对齐

Fabric UI Checkbox Label Alignment

html

css

office-ui-fabric

office-fabric