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

html-css07

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

用css的浮动属性,float:left

比如代码如下:

<ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

</ul>

在css里面控制

li{float:left}

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

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

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

如果背景是纯色,那就不存在平不平铺的问题,文字有多长,背景就有多长。

如果背景是图片,background-repeat:repeat-x这个意思是在水平方向平铺,background-repeat:repeat-y这个意思是在垂直方向平铺

1、将li的height和line-height设置成为和设计稿一样的

2、将列表图标整体切出来,铺在ul上,不平铺

3、使用background-position控制ul背景和li中的文字对齐即可。