Semantic UI, positioning labels

问题

I'm using a checkbox in Semantic UI. I would like to switch the position of the label and the input but it's proving to be kind of a pain. I am using the toggle checkbox.

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

Semantic UI checkboxes docs are here: http://semantic-ui.com/modules/checkbox.html#/definition

If I switch the input and label in the html, the toggle function stops working. I can't even seem to position the elements relatively... is there some easy class I can add or something that will enable the input and label to have switched positioning while still maintaining the functionality of the red-green toggle?

Thanks..

Update: I'm working on a fiddle here: this INCLUDES the semantic ui css and js.

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

回答1:

This is what you can do:

.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;
}

The checkbox is basically just styled to look like that. The actual <input type="checkbox" /> is transparent.

回答2:

So you want the label on the left? Use a float on the label.

I have placed the class - .custom - on the div, but you could apply to an existing class :)

Have an example!

HTML

<div class="ui toggle checkbox custom">

CSS

.custom label {
    float: left;
    margin: 0 5px 0;
}

回答3:

Not sure if you still have this problem but I found a sort of solution. in my case I have a table that looks like

<table>
  <tr>
    <td><label for="A_ID">select A</label></td>
    <td>
        <div class="ui checkbox">
          <input id="A_ID" type="checkbox">
          <label for="A_ID"></label>
        </div>
    </td>
  </tr>
</table>

Because I have a label behind it the code it works (without Javascript).

little example http://jsfiddle.net/3xkrx/162/

来源：https://stackoverflow.com/questions/25355614/semantic-ui-positioning-labels

标签

html

css

checkbox

semantic-ui