css中ul li的背景小图标属性设置的两种情况

ul li的背景小图标属性设置一般会有两种情况:定义在ul里及li里,这两种定义在什么情况下使用,在下文给出详细的介绍,经常div+css布局的朋友不妨参考下,希望对大家有所帮助

 

这里我们分两种情况列出:
①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在<ul>里。因为很长,所以放在<li>的外边<ul>里
②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里

A

复制代码
代码如下:

<style>
.test1 { width:100px; height:265px; background:url(http://www.86image.cn/statics/images/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px; line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>

如图示:
 

B

复制代码
代码如下:

<style>
.test1 li { padding-left:15px; background:url("http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

如图示:

时间: 2024-08-31 03:33:25

css中ul li的背景小图标属性设置的两种情况的相关文章

CSS中ul li居中的问题

li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中. 一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中.但这样可能在宽屏与窄屏的显示不一致. 使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性

一个css中关于li元素的使用,有疑问,请看代码,问题在哪里?

问题描述 一个css中关于li元素的使用,有疑问,请看代码,问题在哪里?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&

WinXp桌面快捷方式图标变成蓝色的两种解决方案

  WinXp桌面快捷方式图标变成蓝色的两种解决方案         方案一: 1.在桌面上单击右键,点击"属性"; 2.点击"桌面"选卡,点击下面的[自定义]按钮; 3.点击"Web"选卡,在"网页"框中将所有网址勾选,然后点击"删除",在弹出的提示框总点击"是" ,点击确定--确定; 方案二: 1.在"我的电脑"上单击右键,选择"属性" ; 2

hadoop spark-在MR模型中,怎么根据处理数据的属性设置双key,甚至多key去map?

问题描述 在MR模型中,怎么根据处理数据的属性设置双key,甚至多key去map? 在MR模型中,怎么根据处理数据的属性设置双key,甚至多key去map? 解决方案 http://my.oschina.net/cloudcoder/blog/277267

datetimeinput-DotNetBar空间的dateTimeInput中的Today和Clear按钮的属性设置

问题描述 DotNetBar空间的dateTimeInput中的Today和Clear按钮的属性设置 使用dateTimeInput时,想把Today和Clear按钮的text属性设置为中文显示,但是不知道从哪里设置, 我用dateTimeInput1.MonthCalendar.TodayButton.Text = "今天";但是不管用,而Clear按钮还没有这样的设置句,请问该如何设置他们的text属性呢?

mvc中动态给一个Model类的属性设置验证

原文:mvc中动态给一个Model类的属性设置验证 在mvc中有自带的验证机制,比如如果某个字段的类型是数字或者日期,那么用户在输入汉字或者英文字符时,那么编译器会自动验证并提示用户格式不正确,不过这样的验证毕竟功能有限,那么就需要我们自己进行定制验证. 假设有Model类:class Dinners{ private string Title;      private System.DateTime EventDate;      private string Description;   

关于html中 ul li 中加入div(div位置随意设置)的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

android中在Activity中响应ListView内部按钮的点击事件的两种方法_Android

最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

Mysql两种情况下更新字段中部分数据的方法_Mysql

Mysql更新字段中部分数据第一种情况:  复制代码 代码如下: update tab set A = concat(substring(A,1,3),'bbb'); 从A的1个字符开始取3个字符,加上'bbb',再写入a中,如果A原始值为'123aaa',那么更新之后为'123bbb'了. 如果我们要将字段A值中的包含的1,替换成2呢? 例如:a=2211,现在要替换成2222,就是把1换成2 SQl语句这么写: 复制代码 代码如下: update table set a=REPLACE(a,