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

css属性为display: inline的元素不适合您的用途。

display：HTML5元素的内联

1 个答案: