关于清除HTML/CSS中浮动NAV栏的这些错误的任何建议

Question

我有一个小导航栏，只有一个在页面上的固定位置，列出了一个固定位置，列出了联系人。我遇到了很多错误，基本上说：

• 错误：在这种情况下，不允许元素H3作为元素UL的孩子。（抑制此子树的更多错误。）267，第5列；到第267行，第24列<ul>↩ <h3 class="heading">Emerge

• 错误：在这种情况下，不允许元素H4作为元素UL的孩子。（抑制此子树的更多错误。）从行
  268，第5列；到第268行，第8列</h3>↩ <h4>Contact1

等...

我已经按照我希望它的工作方式进行设置，我不想更改任何CSS Wise。单击后，它应该打开，而当我摆脱了<ul>标签时，它会弄乱所有内容。

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

这是应该的样子，应该保持外观：

[！[umplescreenshot] [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">[e-mail]</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">[e-mail]</p>
        </li>
    </ul>

Answer 2

使您的h3，h4，p标签<li>

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