html - 显示 : inline for HTML5 elements

Question

我想制作一个水平放置的网站，但我遇到了 display: inline 规则的问题。

它似乎是针对内联导航无序列表量身定制的，完全覆盖了 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

有什么想法吗？

Answer 1

试试这个:

#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

具有 display: inline CSS 属性的元素不适用于您的目的。