在此上下文中，元素输入不允许作为元素ul的子元素

Question

HELP !!!!!!我该如何修复图片滑块的这一部分？ 所以它可以通过验证

它告诉我在这种情况下不允许Element输入作为元素ul的子元素。 （抑制此子树中的更多错误。）

验证者的错误： 第186行，第62列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或多个li和脚本支持元素。 错误行197，第55列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或多个li和脚本支持元素。 错误行208，第54列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或多个li和脚本支持元素。 错误行219，第54列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或多个li和脚本支持元素。 错误行230，第54列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或多个li和脚本支持元素。 错误行241，第54列：在此上下文中，元素输入不允许作为元素ul的子元素。 （抑制此子树中的更多错误。）                  可以使用元素输入的上下文： 在预期措辞内容的地方。 元素ul的内容模型： 零或更多li和脚本支持元素。

<article>
        <div>
        <ul class="slides">
            <input type="radio" name="radio-btn" id="img-1" checked />
            <li class="slide-container">
                <div class="slide">
                    <img src="\images\google-fonts.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-6" class="prev">&#x2039;</label>
                    <label for="img-2" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-2"  />
            <li class="slide-container">
                <div class="slide">
                  <img src="\images\Step1.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-1" class="prev">&#x2039;</label>
                    <label for="img-3" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-3" />
            <li class="slide-container">
                <div class="slide">
                  <img src="\images\Step2.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-2" class="prev">&#x2039;</label>
                    <label for="img-4" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-4" />
            <li class="slide-container">
                <div class="slide">
                  <img src="\images\Step3.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-3" class="prev">&#x2039;</label>
                    <label for="img-5" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-5" />
            <li class="slide-container">
                <div class="slide">
                  <img src="\images\Step4.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-4" class="prev">&#x2039;</label>
                    <label for="img-6" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-6" />
            <li class="slide-container">
                <div class="slide">
                  <img src="\images\step5.jpg" alt="image" />
                </div>
                <div class="nav">
                    <label for="img-5" class="prev">&#x2039;</label>
                    <label for="img-1" class="next">&#x203a;</label>
                </div>
            </li>

            <li class="nav-dots">
              <label for="img-1" class="nav-dot" id="img-dot-1"></label>
              <label for="img-2" class="nav-dot" id="img-dot-2"></label>
              <label for="img-3" class="nav-dot" id="img-dot-3"></label>
              <label for="img-4" class="nav-dot" id="img-dot-4"></label>
              <label for="img-5" class="nav-dot" id="img-dot-5"></label>
              <label for="img-6" class="nav-dot" id="img-dot-6"></label>
            </li>
        </ul>
        </div>
    </article>

Answer 1

您必须将input放在li内（这可能会改变页面的外观）。

        <li class="slide-container">
            <input type="radio" name="radio-btn" id="img-1" checked /> 
            <div class="slide">
                <img src="\images\google-fonts.jpg" alt="image" />
            </div>
            <div class="nav">
                <label for="img-6" class="prev">&#x2039;</label>
                <label for="img-2" class="next">&#x203a;</label>
            </div>
        </li>