【手记】理想的网页列表效果

我理想的列表是这样的:

即①前导符号要与前后段落对齐;②item间要悬挂对齐

单纯用ul/ol的list-style-position是搞不掂的,inside是可以让整个列表区块与段落对齐,但会失去项间悬挂对齐效果;outside倒是悬挂对齐了,但前导符又超出正常范围了,倒是可以给ul加margin-left使之缩进来,但具体缩多少能刚好对齐前后段落,没个准数,而且不同设备不同字体都容易走样,所以这不是理想的办法。今天在逛一个网站时留意到它的列表效果很理想,于是扒了一招,要点:

ul {
    padding: 0;
    /* border-spacing: 0 0.5em;    调整item间距 */
}

li:before {
    content: "\2022\00a0\00a0"; /* 利用before插入前导符及空格 */
    display: table-cell;        /* 使前导符部分作为一个单元格 */
}

li {
    display: table-row;         /* 使每个item作为一个行 */
}

原理就是自制前导符,然后利用table-cell/row的组合,使前导符与项内容属于不同的“列“,自然就双双对齐了,有序列表用counter搞掂。需要注意的是,用了table-xxx后,要想调整item间距,不能再用margin,无效,得用border-spacing。题外,ul默认的实心圆符号disc,既不是\2022,也不是\25cf,还请知道的大佬告知正确的unicode编码。

效果一览:https://codepen.io/ahdung/pen/eKOadx

- EOF -

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏源码之家

博看网杂志下载时批量更改图片大小

12920
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

19010
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

20120
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1.1K10
来自专栏从零开始学自动化测试

Appium+python自动化12-appium元素定位

前言 appium定位app上的元素,可以通过id,name.class这些属性定位到 一、id定位 1.appium的id属性也就是通过UI Automato...

50780
来自专栏hbbliyong

WPF模板

先来个模板: <ControlTemplate x:Key="button" TargetType="Button"> <Border ...

39640
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

2K660
来自专栏岑志军的专栏

ReactNative-综合案例(01)

15630
来自专栏河湾欢儿的专栏

选中分享

9910
来自专栏CRPER折腾记

VS Code折腾记 - (2) 快捷键大全,没有更全

VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影。。简言之,内置快捷键玩熟了,效率提高不是一点两点。

17020

扫码关注云+社区

领取腾讯云代金券