Question

我正面临一个问题，即在我的html中更改复选框的对齐方式。

这是我的HTML：

<ol id="menutree">
  <li>

    <label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
    <input type="checkbox" id="c1" />                             <!-- input must follow label for safari -->
    <ol>
      <li>
        <label for="c2" class="menu_label">Menu Am1a1</label>
        <input type="checkbox" id="c2" />
        <ol>
          <li class="page"><a href="#">Page Ap1a1</a></li>
          <li class="page"><a href="#">Page Ap1a2</a></li>
          <li class="page"><a href="#">Page Ap1a3</a></li>
        </ol>
      </li>
      <li>
        <label for="c3" class="menu_label">Menu Am1b1</label>
        <input type="checkbox" id="c3" />
        <ol>
          <li class="page"><a href="#">Page Ap1b1</a></li>

          <li>
            <label for="c4" class="menu_label">Menu Am2b1 </label>
            <input type="checkbox" id="c4" />
            <ol>
              <li class="page"><a href="#">Page Ap2b1</a></li>
            </ol></li>
        </ol></li>
    </ol></li>

  <li>
    <label class="menu_label" for="c5">Menu Bm0a1</label>
    <input type="checkbox" id="c5" />
    <ol>
      <li>
        <label for="c6" class="menu_label">Menu Bm1a1</label>
        <input type="checkbox" id="c6" />
        <ol>
          <li class="page"><a href="#">Page Bp1a1</a></li>
        </ol>
      </li>
      <li>
        <label for="c7" class="menu_label">Menu Bm1b1</label>
        <input type="checkbox" id="c7" />
        <ol>
          <li class="page"><a href="#">Page Bp1b1</a></li>
          <li>
            <label for="c8" class="menu_label">Menu Bm2b1</label>
            <input type="checkbox" id="c8" />
            <ol>
              <li class="page"><a href="#">Page Bp2b1</a></li>
            </ol></li>
        </ol></li>
    </ol></li>

</ol>

我的css是

#menutree li {
   list-style: none;          /* all list item li dots invisible */
         }

   li .menu_label + input[type=checkbox] {
      opacity: 2;             /* checkboxes invisible and use no space */
     }                        /* display: none; is better but fails in ie8 */

    li .menu_label {
      cursor: pointer;        /* cursor changes when you mouse over this class */
    }                         /* could add the many user-select: none; commands here */

      li .menu_label + input[type=checkbox] + ol > li
         {
            display: none;         /* prevents sublists below unchecked labels from displaying */
         }

      li .menu_label + input[type=checkbox]:checked + ol > li
         {
           display: block;         /* display submenu on click */
         }

现在问题是标签后显示复选框，我需要标签前的复选框。

所以有人可以帮我解决这个问题吗？

注意：在标签之前显示复选框后，功能应该像以前一样工作.....

感谢。

这里我附上了jsfiddle链接 jsfiddle

Answer 1

你是这样写的

 <label for="c2" class="menu_label">Menu Am1a1</label>
        <input type="checkbox" id="c2" />

更改为

<input type="checkbox" id="c2" />
<label for="c2" class="menu_label">Menu Am1a1</label>

Answer 2

此技术使用相邻的兄弟组合器+，因此

input[type=checkbox] + foo

要工作，元素foo必须立即跟随input元素。如果您颠倒HTML中input和label的顺序，则不再满足该条件。

但您可以通过将这些选择器部件更改为

来纠正此问题

input[type=checkbox] + label + foo

这样你就可以拥有像

这样的HTML结构

<input>
<label>
<foo>

相反，检查输入仍会影响foo元素或其后代的样式。
它不再适用于直接跟在foo之后的input元素，而是适用于直接跟随foo的{{1}}的{{1}} - 同样的原则，只需插入“一步”。

我在这里修改了你的小提琴以表明行动：http://jsfiddle.net/6LKc6/302/

（您的原始小提琴在HTML面板中包含一个完整的HTML文档，虽然这不是必需的，但相反适得其反。下次请坚持jsfiddle在插入完整HTML文档时向您显示的警告，只输入正文内容。）

您的原始小提琴包含输入字段后的注释

label

- 我不知道这是什么意思，我现在没有简单的方法在Safari中测试，所以请自己动手以确保修改后的版本仍能按预期工作。
（我知道某些浏览器的某些旧版本在使用伪类和相邻兄弟组合器这样的问题上一般都有问题 - 但如果这在那里是相关的，那么原始版本很可能不会在那些首先使用。）

如何更改html中复选框的对齐方式

2 个答案: