语义用户界面，定位标签 [英] Semantic UI, positioning labels

问题描述

我在语义用户界面中使用复选框。我想交换标签和输入的位置，但事实证明这是一种痛苦。我正在使用切换复选框。

<div class="ui toggle checkbox">
  <input id="privacy" type="checkbox" checked="checked">
  <label for="privacy">Public</label>
</div>

语义UI复选框文档在此处：http://semantic-ui.com/modules/checkbox.html#/definition

如果我在html中切换输入和标签，切换功能将停止工作。我甚至不能确定元素的相对位置。有没有我可以添加的简单类，或者可以使输入和标签在保持红绿切换功能的同时切换位置的类？

谢谢..

更新：我正在做一个小提琴：这包括语义UI、css和js。

http://jsfiddle.net/3xkrx/30/

推荐答案

您可以这样做：

.ui.toggle.checkbox label {
    padding-left:0;
    padding-right:4em;
}

.ui.checkbox input,
.ui.toggle.checkbox label:before {
    left:auto;
    right:0;
}

.ui.toggle.checkbox label:after {
    left:auto;
    right:1.75em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

.ui.toggle.checkbox input:checked + label:after {
    left:auto;
    right:0.5em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

复选框基本上就是这样设计的。实际<input type="checkbox" />是透明的。

这篇关于语义用户界面，定位标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！