html - 按钮和滑动菜单

Question

为什么 label 标签内的 input 标签不起作用，而 label 标签外的 input 标签起作用，除非有解决方法？

这会导致向左滑动，因为输入标签在标签标签之外。

<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label id="menuButton" for="nav-trigger"></label> 

虽然这不会导致 div 向左滑动，因为 input 标签在 label 标签内，但是我添加了一个复选框以确保它正常工作，但没有成功。

<label id="menuButton" for="nav-trigger">
    <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
</label>

Jsfiddle(输入外部标签有效):https://jsfiddle.net/dxs6040/4ovp3zty/3/

Jsfiddle(标签标签内的输入不起作用):https://jsfiddle.net/dxs6040/hbtho680/6/

Answer 1

我相信这是因为你的 css.如果您的目标是像这样的输入元素 .nav-trigger:checked + label，则选中复选框后的下一个第一个标签元素。如果您更改 HTML 中的顺序，这将不再有效。