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

Question

帮助!!!!!!我该如何修复图像 slider 的这一部分？ 所以它可以通过验证

它告诉我在此上下文中不允许元素输入作为元素 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>