html - 关于清除 HTML/CSS 中 float 导航栏的这些错误的任何建议？

Question

我有一个小导航栏，只有一个选项位于页面的固定位置，列出了联系人。我得到了一大堆错误，基本上是这样说的:

• 错误:在此上下文中，元素 h3 不允许作为元素 ul 的子元素。 (抑制来自该子树的更多错误。)来自行 267，第 5 栏；到第 267 行，第 24 列 <ul> ↩ <h3 class="heading">Emerge

• 错误:在此上下文中，元素 h4 不允许作为元素 ul 的子元素。 (抑制来自该子树的更多错误。)来自行
  268，第 5 栏；到第 268 行，第 8 列 </h3> ↩ <h4>Contact1

等等...

我已经按照我希望的方式设置了它，我不想用它更改任何 CSS 明智的东西。单击它应该打开，并且我摆脱了 <ul>标签，它把一切都搞砸了。

这是工作代码版本:https://jsfiddle.net/jgg7kqv4/2/

它应该是这样的，并且应该保持这样:

[![示例截图][1]][1]

这是基本的 HTML:

<aside>
    <ul id="contact">
        <li>
            <input type="checkbox" id="contact"/>
            <label for="contact" name="contact">Contact</label>
            <ul>
                <h3 class="heading">Emergency Contacts</h3>
                <h4>Contact1</h4>
                <p class="underline"><a href="#">LINK</a></p>
                <h4>Contact2</h4>
                <p class="italic">Monday - Friday: 8 am - 4 pm</p>
                <p>Phone number: ###-###-####</p>
                <h4>Contact3</h4>
                <p class="italic">Monday - Friday; 10am - 6pm</p>
                <p>Phone number: ###-###-####</p>
                <p>Location</p>
                <p class="underline"><a href="#">WEBSITE</a></p>
                <h4>Email contact</h4>
                <p class="underline">noemail@noemail.com</p>
            </ul>
        </li>
    </ul>
</aside>

有人对我有什么建议吗？

编辑:更新 JSFiddle 演示:https://jsfiddle.net/jgg7kqv4/2/

Answer 1

尝试用 li 标签包装您的内容:

    <ul>
        <li style="display: block">
            <h3 class="heading">Emergency Contacts</h3>
            <h4>Contact1</h4>
            <p class="underline"><a href="#">LINK</a></p>
            <h4>Contact2</h4>
            <p class="italic">Monday - Friday: 8 am - 4 pm</p>
            <p>Phone number: ###-###-####</p>
            <h4>Contact3</h4>
            <p class="italic">Monday - Friday; 10am - 6pm</p>
            <p>Phone number: ###-###-####</p>
            <p>Location</p>
            <p class="underline"><a href="#">WEBSITE</a></p>
            <h4>Email contact</h4>
            <p class="underline">noemail@noemail.com</p>
        </li>
    </ul>