基础6交换机标签定位

Question

我正在使用带有开关样式复选框的Foundation 6，并且希望标签显示在开关的左侧而不是开关的上方。对于如何实现这一点有什么想法吗？

下面是一个codepen，显示了实际运行的以下代码

<div class='grid-x'>
  <div class='cell small-3' id='quadDivLiveClient'>
    <div class='cell small-5'>
      <label>Exclude condition1?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk1' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk1'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
  <div class='cell small-5'>
      <label>Exclude condition2?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk2' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk2'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
<div class='cell small-5'>
      <label>Exclude condition3?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk3' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk3'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
  </div>
</div>

Answer 1

像这样的codepen？

https://codepen.io/xanisu/pen/yXZjez

添加此css样式：

.switch-paddle .switch-active, .switch-paddle .switch-inactive{
  position: absolute;
  left: 52px; 
  color: #000;
}