显示：内嵌HTML5元素

Question

我正在寻找一个水平铺设的网站，但我遇到了显示问题：内嵌规则。

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

元素并不打算为你的目的。