显示：内联HTML5元素

我想制作一个水平放置的网站,但显示出现问题：内嵌规则.

它似乎是为内联导航无序列表量身定制的,完全覆盖了CSS中文章(和/或各节)的高度和宽度设置.

这是html：

<div id="container">
   <section id="about" class="first">
    <article>
     About Us
    </article>
   </section><!--about-->

   <section id="projects">
    <article>
     Project 1
    </article>
    <article>
     Project 2
    </article>
    <article>
     Project 3
    </article>
    <article>
     Project 4
    </article>
    <article>
     Project 5
    </article>
   </section><!--projects-->

   <section id="blog">
    <article>
     Blog 1
    </article>
    <article>
     Blog 2
    </article>
    <article>
     Blog 3
    </article>
    <article>
     Blog 4
    </article>
    <article>
     Blog 5
    </article>
   </section><!--blog-->

   <section id="contact">
    <article>
     Contact
    </article>
   </section><!--contact-->

   <section id="tweets">
    <article>
     Tweets
    </article>
   </section><!--tweets-->

   <section id="comments">
    <article>
     Comments
    </article>
   </section><!--comments-->

   <section id="links">
    <article>
     Links
    </article>
   </section><!--links-->

        </div> <!--container-->

这是CSS：

#container{
 height: 600px;
 display: inline;
}

section{
 display: inline;
}

article{
 height: 600px;
 width: 300px;
 display: inline;
}

看起来是这样的：

http://danixd.com/archive/html5.html

有任何想法吗？

最佳答案

尝试这个：

#container{
 height: 600px;
 float: left;
 overflow: auto;
}

section{
 float: left;
}

article{
 height: 600px;
 width: 300px;
 float: left;
}

阅读：http://www.webdesignfromscratch.com/html-css/css-block-and-inline.php

具有CSS展示属性的元素：内联并非旨在满足您的目的.

原文地址：https://www.jb51.cc/html/530649.html