html - 为什么我的页眉样式会影响我的内容 div？

Question

我有以下带有完整代码的 HTML 代码 here

    <div id="header">

        <a href="index.html" id="logo">
             <h1 class="headings">THE 100 DAYS PROJECT</h1>

        </a>


        <nav>
            <ul>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>

            </ul>
        </nav>
  </div>


 <div id="contact_container">

        <h3>General Informations</h3>

       <p>I am not currently looking for new design work, but I am available for speaking gigas and similar engagaments. If you have any questions, please don't hesitate to contact me!</p>

        <p>Please only use phone contact for urgent inquiries. Otherwise, twitter and email are the best way to reach me.</p>

        <h3>Contact info</h3>

                <ul class="contact_info">

                   <li>Phone</li>
                   <li>Email</li>
                   <li>Blog</li>
               </ul>

虽然我没有为联系人部分中的列表指定任何样式，但元素符号不会显示，元素显示在行中。据我所见，影响这一点的代码行是:

          #header ul, li {
             display: inline-block;
               }

为什么会这样？我希望联系人部分中的未排序列表以元素符号显示，并将元素放在不同的行中。谢谢!

Answer 1

因为#header ul, li的意思是#header ul或li，而不是#header ul或#header li.

相反，将选择器写成#header ul, #header li。