Question

非常简单的人：在html和css中创建一个可折叠的列表，并尝试将控制下拉的复选框移动到文本的FRONT，以及删除点以列出项目。现在，复选框位于文本的末尾。我试图简单地切换html的顺序，但这会搞砸下拉动作。

HTML：

<div class="CHECKBOXMENU">
<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2 with subfolders</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>
  <label for="mylist-node3">Click to expand</label>
  <input type="checkbox" id="mylist-node3" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>
</div>

CSS：

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList label {
 cursor: pointer;
}

Answer 1

无需重构HTML。 float: left所需的复选框，并使用list-style-type: none

删除项目符号

ul.collapsibleList,
ul.collapsibleList ul {
  list-style-type: none;
}
#mylist-node1,
#mylist-node2,
#mylist-node3 {
  float: left;
  margin-right: 5px;
}

JSfiddle

移动html列表中的复选框并移动它

1 个答案: