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

我们在查阅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. VUE验证器哪家强? VeeValidate absolutely!

    VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...

  2. 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位

    昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...

  3. 搭建并行开发环境MPICH2

    平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装BLAS之前需要: 安装 GCC/GFortran 环境 安装步骤 下载 m ...

  4. PopUpWindow使用方法

    个人使用建议,容易犯错:先设置属性再显示,而不是先出来了,再设置都没用了,显示一般是用showatlocation,或者showasdropdown 个人建议2:popupWindow的显示的两个方法 ...

  5. mac os安装macvim

    1 brew install macvim 安装 macvim 2 alias vim='/usr/local/Cellar/macvim/7.4-73_1/MacVim.app/Contents/M ...

  6. Ajax原理实现

    jQuery的ajax实现原理: // 1.创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.打开请求 xhr.open('METHO ...

  7. HDU 5371——Hotaru's problem——————【manacher处理回文】

    Hotaru's problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  8. intellijidea课程 intellijidea神器使用技巧1-3 idea下载

    下载: 下载地址:https://www.jetbrains.com/idea/download/ download==>windows==>ultimate版本(付费版本免费试用30天) ...

  9. (三)JavaScript之[事件]与[字符串]

    5].事件**JavaScript事件:HTML事件 * HTML事件是发生在HTML元素上的事情 * HTML事件可以是[浏览器的行为],也可以是[用户的行为] * * 实例: * HTML页面完成 ...

  10. (八)JavaScript之[JSON]与[void]

    14].JSONJSON 格式在语法上与创建 JavaScript 对象代码是相同的. 方法:JSON.parse(); //将JSON字符串转换为JavaScript对象JSON.stringify ...