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

Question

帮助！！！！！！如何修复图像滑块的这一部分？ 所以它可以通过验证

它告诉我在这种情况下元素输入不允许作为元素 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>