Флажок UI Флажок Выравнивание меток - PullRequest
Новая
       41

Флажок UI Флажок Выравнивание меток

0 голосов
/ 25 июня 2019

Я пытаюсь добавить флажок в область задач надстройки 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>

Панель задач достаточно широка, но метки всегда появляются в строке ниже.

enter image description here

1 Ответ

1 голос
/ 25 июня 2019

Установите свойство CSS для .ms-Checkbox, где 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>
...