如何使用 CSS 自定义无序列表样式
大家好,我是前端西瓜哥。
前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。
设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点。
默认的无序列表样式是这样的。
<style>ul {width: 200px;border: 1px solid #555;font-size: 13px;line-height: 20px;color: #2362d6;}
</style><ul><li>我是第一行。</li><li>你是第二行你是第二行你是第二行你是第二行你是第二行</li><li>三</li>
</ul>
虽然觉得有点花里胡哨,但我还是去研究了,看看怎么给圆点变大一点。
::before
我们先将 li 原有的圆点去掉,通过给 li 加上 list-style: none;
的方式。
然后用 ::before
给 li 前面创建一个伪元素,加上圆点字符。
ul {/* ... *//* 稍微调整一下 ul 的左边距 */padding-inline-start: 20px;
}
li {list-style: none;
}
li::before {/* 这里加两个空白符作为边距 *//* 你也可以用 margin-right */content: "\2022 ";font-size: 22px;
}
这里我给 content 的值末尾加了两个空格符,来实现右边距效果。你也可以用 margin-right 来做,更正规一些。
注意点:这里 content 的值最好用转义字符,不要用原字符,因为我发现在某些浏览器会乱码。
圆点没和文字水平居中对齐,我们用 transform 微调一下位置。
需要注意的一点是,transform 对行内元素(display: inline)无效。而 ::before 伪元素默认为行内元素,需要手动改为 inline-block。
完整写法为:
ul {width: 200px;border: 1px solid #555;font-size: 13px;line-height: 20px;color: #2362d6;padding-inline-start: 20px;
}
li {list-style: none;
}
li::before {content: "\2022 ";display: inline-block;font-size: 22px;transform: translateY(3px);
}
设计师很满意地离开了。
但过了几天,他发现有些不对劲,又跑过来和我说:不对,这个换行的文字起始位置不应该在圆点下边,而是应该和第一行文字左侧对齐,也就是应该像下面这样。
::before + 绝对定位
问题不大,马上改。
将 ::before 伪元素设置为绝对定位,让圆点脱离正常文档流。这次我们用 left 来调整位置。
完整的写法为:
ul {width: 200px;border: 1px solid #555;font-size: 13px;line-height: 20px;color: #2362d6;padding-inline-start: 40px;
}
li {position: relative;list-style: none;
}
li::before {content: "\2022 ";position: absolute;left: -11px;display: inline-block;font-size: 22px;
}
效果很完美,设计师很满意地离开了。
list-style-type 和 ::marker
如果你不需要修改圆点大小,而是想替换为其他符号,还用一种写法是使用 list-style-type 或 ::marker。
list-style-type 用在 ul 元素上。
ul {width: 200px;border: 1px solid #555;font-size: 13px;line-height: 20px;color: #2362d6;padding-inline-start: 20px;list-style-type: "\2708"; /* 飞机符号 */
}
然后我们看到原点变成了飞机字符:
::marker 则是用在 li 元素上,可以让不同的 li 使用不用样式。
li::marker {content: "\2708";
}
更具体的写法这里就不展开讲了,读者可以自行阅读官方文档。
但这种方案在修改圆点大小后,无法使用 transform 进行位置的调整,所以我没有用这个。
结尾
小小的无序列表自定义样式也挺多门道的,希望对你有所帮助。
我是前端西瓜哥,分享前端知识,欢迎关注我。
如何使用 CSS 自定义无序列表样式相关推荐
- css 无序列表横排列,CSS:无序列表样式
CSS按优先级和标识符工作.要定位页面上的所有H2元素,您将声明 h2 { color: #00FF00; } 但是,您也可以获得更具体的内容,并且仅在DIV中定位H2元素,例如: div h2 { ...
- 零基础CSS入门教程(11)——无序列表样式
本章目录 1.任务目标 2.无序列表样式 3.代码如下 4.小结 1.任务目标 我们再html里面有无序列表和有序列表,那我们这一小节学习一下列表样式,并熟练掌握. 2.无序列表样式 (1)list- ...
- CSS Ul(列表样式)
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- css列表大全,CSS中li列表样式汇总大全,全实例展示
CSS中 列表样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} ...
- firefox custom css,自定义FireFox的样式,火狐CSS样式使用教程
自定义火狐的样式,通常是通过CSS代码来实现的,那么这些CSS代码怎么使用才能让火狐浏览器按着自己的意图改变它的样式呢? 这些CSS代码的一般是通过两种方式来使用的,一是由Stylish扩展来加载它们 ...
- Css中设置列表项目符号属性,CSS如何设置列表样式属性,分享
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- CSS中将无序列表的项目符号改为指定图片
一.将无序列表的项目符号改为指定图片 二.将无序列表的项目符号默认的圆点改为方块 HTML <ul><li>Humous</li><li>Pitta&l ...
- CSS自定义鼠标指针样式
原文链接: http://davidwalsh.name/css-custom-cursor Demo地址: http://davidwalsh.name/demo/css-custom-cursor ...
- html三角形无序列表样式,Keynote创建项目符号列表或编号列表
文本框会添加到幻灯片上. 选择要格式为列表的文本,然后从 中选取一个选项. 2.选定了文本框后,在"格式"检查器的"文本"面板中,从"项目符号与列表& ...
最新文章
- 大数据分布式集群搭建(2)
- python2.7安装matplotlib_Python安装Numpy和matplotlib
- js可以放gif吗_你清楚,一瓶开过的葡萄酒,最长可以放多久的时间吗?
- MySQL数据库:事务和ACID实现原理
- python如何安装扩展库openpyxl和numpy_Python第三方库之openpyxl(2)
- [react] 如何提高组件的渲染效率呢?
- Linux学习:第五章-Linux用户和用户组管理
- angularjs控制器之间的数据共享与通信
- 花了两天时间为我的引擎实现了性能分析的界面显示
- 为什么i3的cpu基础频率最高,达到4.0了?
- 【转】No JVM could be found on your system解决方法
- SDR与DDR的区别
- go - struct
- (转)MFC消息机制
- 在uniapp中配置并colorui及阿里图标
- 什么是封装、继承和多态
- 微信小程序如何搭建自己的后台(超详细,超完整)(上线必备)!!!
- 不断改进的FUP TC20H 台式多用途高速冷冻离心机
- java游戏项目推箱子
- linux设置合上电脑,CentOS7设置笔记本合盖不休眠