如何定位复选框和文本

Question

我在定位这些复选框及其各自的文本时遇到了一些问题。

隐藏了实际的复选框，以便可以使用个人风格。

无论如何，这纯粹是一个 CSS 问题。文本应位于复选框的前面。

一直在用头撞墙，做不到...

我错过了什么？

谢谢。

JSFiddle

HTML:

<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
            <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 1</div>
        <div class="kat2">
            <label>
            <input id="catswitch2" type="checkbox" onclick="shCat(2);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 2</div>
        <div class="kat8">
            <label>
            <input id="catswitch8" type="checkbox" onclick="shCat(8);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 3</div>
    </form>
</div>

CSS:

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}

#navigation {
    left: 10px; top: 10px;
    width: 120px;
    border: 1px solid #000;
}

#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label {
background: #FFF;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

input[type=checkbox]:checked + label {
background: #000;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

Answer 1

文本放在新闻 div 中。 divs 占据了整个 space，尤其是在新的一行中。摆脱它。而是将它们放在 span 和父级内部，如下所示：

<div class="kat1">
  <label>
   <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/>
   <label for="thing" style="cursor: pointer"></label>
  </label>
  <span>ITEM 1</span>
</div>

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}
#navigation {
    left: 10px;
    top: 10px;
    width: 120px;
    border: 1px solid #000;
}
#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}
input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #FFF;
    height: 11px;
    width: 11px;
    display:inline-block;
    padding: 0 0 0 0px;
    border: 1px solid #000;
}
input[type=checkbox]:checked + label {
    background: #000;
    height: 11px;
    width: 11px;
    display:inline-block;
    padding: 0 0 0 0px;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
                <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 1</span>
        </div>
        <div class="kat2">
            <label>
                <input id="catswitch2" type="checkbox" onclick="shCat(2);" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 2</span>
        </div>
        <div class="kat8">
            <label>
                <input id="catswitch8" type="checkbox" onclick="shCat(8);" />
                <label for="thing" style="cursor: pointer"></label>
            </label>
          <span>ITEM 3</span>
        </div>
        <div class="kat14">
            <label>
                <input id="catswitch14" type="checkbox" onclick="shCat(14);" />
                <label for="thing" style="cursor: pointer"></label>
            </label>
          <span>ITEM 4</span>
        </div>
        <div class="kat9">
            <label>
                <input id="catswitch9" type="checkbox" onclick="shCat(9);" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 5</span>
        </div>
    </form>
</div>

Answer 2

类似的东西？

http://jsfiddle.net/5u2o1y1h/1/

只需在 <label> 标签后添加 ITEM 文本即可。

Answer 3

https://jsfiddle.net/b6aywnok/

CSS:

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}

#navigation {
    left: 10px; top: 10px;
    width: 120px;
    border: 1px solid #000;
}

#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label {
background: #FFF;
height: 11px;
margin-left:100px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

input[type=checkbox]:checked + label {
background: #000;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

h3
{
margin-left:50px;
margin-top:-25px;
}

html:

<body>
<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
            <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 1</h3>
        <div class="kat2">
            <label>
            <input id="catswitch2" type="checkbox" onclick="shCat(2);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 2</h3>
        <div class="kat8">
            <label>
            <input id="catswitch8" type="checkbox" onclick="shCat(8);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 3</h3>
    </form>
</div>
</body>

如何定位复选框和文本

How to position checkbox and text

html

css

checkbox

jquery