Foundation 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

喜欢这个代码笔吗？

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

添加此 css 样式：

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

Foundation 6 开关标签定位

Foundation 6 Switch Label positioning

html

css

zurb-foundation