等我们实现列表时,经常会遇到一种情况:需要为列表的每一项的前面添加一个列表项图像。

我们在查阅W3C时会发现,在CSS中已经为我们提供了实现方法——“list-style-type”,我们来看看它的实现方法。

方法一(“list-style-type”属性):

  

  1. ul {
  2. list-style-type : square;
  3. list-style-position: inside;
  4. }

这样做的确能实现添加小方块,其中 的“inside”是为了保证小方块在列表项的内部,对于方块的大小和间距仍然需要额外控制,(注意在设置type后就不要把li的display设置成其他值了),更重要的原因是,css为我们提供的样式有限,不能满足我们丰富的要求。(如果想使用list-style-image添加自己的图片,我们仍然需要去单独控制image的位置,这样做要比单独的一个span或div要麻烦一些。)list-style-type带来的问题不止这些。它是一种不稳定的式样,在IE中对它的解析与chorm会有不同。一般地在chorm中会是一个漂亮小巧的小方点,而在IE中它是一个大方块。这是因为我们并未对它的大小有控制。因此我提倡以下两种方法。

方法二(行内的span):

  1. .listImgDemoBox_1 ul {
  2. list-style: none;
  3. }
  4.  
  5. .listImgDemoBox_1 ul li {
  6. height: 20px;
  7. font-size: 16px;
  8. line-height: 20px;
  9.  
  10. }
  11.  
  12. .listImgDemoBox_1 ul li span {
  13. display: inline-block;
  14. width: 3px;
  15. height: 3px;
  16. background-color: #000000;
  17. vertical-align: middle;
  18. }

即,每一个列表项内都放入行内元素。最前面放入一个span来填充颜色或图像。

方法三(浮动的span):

  1. .listImgDemoBox_1 ul {
  2. list-style: none;
  3. }
  4.  
  5. .listImgDemoBox_1 ul li {
  6. height: 20px;
  7. font-size: 16px;
  8. line-height: 20px;
  9. padding-left: 10px;
  10.  
  11. }
  12.  
  13. .listImgDemoBox_1 ul li span {
  14. display: block;
  15. float: left;
  16. width: 3px;
  17. height: 3px;
  18. margin-top: 9px;
  19. margin-right: 5px;
  20. background-color: #000000;
  21. vertical-align: middle;
  22. }

即li的padding-left留出空位,再将列表项的图片浮动过去。

方法二和方法三在IE和Chorm中的效果是一样的,并且位置也比较好控制。

IE问题——列表项图像的更多相关文章

  1. CSS:列表样式(设置列表项的标志图案/位置)

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  2. CSS中列表项list样式

    CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...

  3. (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector

    本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...

  4. 好神奇的代码,可以让匿名用户对特定SharePoint 列表拥用添加列表项的权限哦

    如果你不使用代码,很难从界面上去设置列表的匿名用户(如果可以请告诉我,我会自动删除这个博文)拥有列表项的添加权限. 其实这种需求是非常必要的,比如: 1.允许新用户去提交一个注册申请, 2.在召集临时 ...

  5. 复制SharePoint列表项(SPListItem)到另一个列表

    从理论上讲,有一个简单到难以置信的解决办法:SPListItem提供了一个CopyTo(destinationUrl)方法(可参考MSDN).不幸的是,这个方法似乎用不了.至少对我的情况(一个带附件的 ...

  6. 【WPF】制作自定义的列表项面板

    我们在使用像ListBox的列表控件时,我们都知道可以通过其ItemsPanel的依赖项属性来自定义一个面板来放置列表控件中的列表项.除了CLR库提供的几个面板外,我们完全可以把自己写的面板作为项列表 ...

  7. 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询

    前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...

  8. 关于ol有序裂变和ul无序列表前面的列表项标记的位置

    使用列表项标记的时候发现其对齐方式竟然从内容开始,于是发现了这个属性可以解决: list-style-position inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐. outsid ...

  9. Android 可拖动列表项的ListView

    需求分析 一个界面内两个ListView 我关注的栏目列表 上面的要长按后可拖动排序 点击减号后列表项消失 下面列表增加一行 同时存储相应字符串到本地作为标记 未关注栏目列表 普通ListView 点 ...

随机推荐

  1. vector 中需要注意的东西!

    vector的erase方法注意点!!! C++11是这样的: iterator erase (const_iterator position); iterator erase (const_iter ...

  2. cesm1_2_2在南信大大型机上的移植以及运行简单case的步骤

    真实验证有效:点击链接 查看具体移植过程.

  3. CentOS 7 Linux 卸载/安装 Mariadb MySQL mysql 5.7

    [root@localhost mysql]# ls mysql-community-client--.el7.x86_64.rpm mysql-community-embedded-compat-- ...

  4. vue-cli构建项目在index.html中使用静态文件

    在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直 ...

  5. 牛客网Java刷题知识点之什么是单例模式?解决了什么问题?饿汉式单例(开发时常用)、懒汉式单例(面试时常用)、单例设计模式的内存图解

    不多说,直接上干货! 什么是单例设计模式? 解决的问题:可以保证一个类在内存中的对象唯一性,必须对于多个程序使用同一个配置信息对象时,就需要保证该对象的唯一性. 如何保证? 1.不允许其他程序用new ...

  6. CentOS 7 更新软件源和系统

    [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cent ...

  7. springmvc+spring+mybatis+sqlserver----插入一条新数据

    <insert id="addOneMsg" parameterType="java.util.Map"> INSERT INTO PDA_JWL_ ...

  8. P1576 最小花费

    题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...

  9. SAP R/3 IDES 4.71 编译前后硬盘空间大小比较

    使用SGEN编译前 使用SGEN编译后

  10. Mahara-16.10 (Ubuntu 16.04)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: mahara-16.10 commercial education elearning mahara open source 服务优惠价: 按服务商 ...