gpt4 book ai didi

html - 显示 : inline for HTML5 elements

转载 作者:可可西里 更新时间:2023-11-01 13:18:06 25 4
gpt4 key购买 nike

我想制作一个水平放置的网站,但我遇到了 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

有什么想法吗?

最佳答案

试试这个:

#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 属性的元素不适用于您的目的。

关于html - 显示 : inline for HTML5 elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2603984/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com