如何把无序列表用css平铺为一行?

html-css09

如何把无序列表用css平铺为一行?,第1张

用css的浮动属性,float:left

比如代码如下:

<ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

</ul>

在css里面控制

li{float:left}

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

我写了段CSS,但是左边的和右边的是在同一行,但右边的跑下边一行了,请教了

CSS代码 ---------------------------------

#icon_left {

height: 72px

width: 60px

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"

font-size: 12px

font-weight: normal

text-align: center

line-height: 20px

float: left

}

#icon_middle {

height: 72px

width: 60px

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"

font-size: 12px

font-weight: normal

text-align: center

line-height: 20px

margin-right: auto

margin-left: auto

}

#icon_right {

height: 72px

width: 60px

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"

font-size: 12px

font-weight: normal

text-align: center

line-height: 20px

float: right

}

DIV代码 -----------------------------------

<div id="icon_left"><img src=images/icon1.gif /><br />

战略&秘籍</div>

<div id="icon_middle"><img src=images/icon1.gif /><br />

地图下载</div>

<div id="icon_right"><img src=images/icon1.gif /><br />

任务下载</div>

解析:

试验了很久没搞出来,估计是float这个属性在块的行分布的计算上存在BUG,你看看这篇文章:

sace/members/persons/lpj/blog/CSS%2CFloat%2C01/

其中有一段:

“如果居左的浮动被放置在其容器的左上脚,并且其后跟随一个同向的浮动,该浮动会被放置在容器右上脚,然后移动到左侧,边界延伸到第一个浮动的右侧时停止。”

“最后的一种行为让我们创建整行的floats,每个都被放置在前一个的右侧(或者左侧,如果使用{float:right}). 同样,当一行中没有足够的空间时,多出来的floats绕到下一行,非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便,因为矩阵会自动调整到屏幕的尺寸,只是简单地在需要时进行回绕。”

似乎说明了你的要求无法实现的原因……

如果你坚持采用这样的页面布局,可以考虑用表格,用表格要快的多了……

哈,参考了这篇文章:

ziyihome/bbs/dispbbs?boardid=13&id=498&page=1

搞出来了,你得把处于中间的那个块在代码中放在最后面……

想要让多个div元素并列成一行,可以将div元素的float属性设置为left。但这样做还不够,应为当浏

览器的宽度小于这几个div的宽度总和时还是会有div会跑到底部,所以需要将想要并列的div元素套

在另外一个大div里,当然,这个大div宽度要大于并排div宽度的总和。这样子,就可以做到怎么变

换窗口大小时div都不会跑到下面了。

以下是具体演示步骤:

1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。

2、在body标签里添加一个大div来容纳并列的div。

3、在大div里添加想要并列的div元素,并在style属性里添加float:left即可

4、运行效果。