如何使用 CSS 自定义无序列表样式

更新日期: 2022-05-27阅读: 920标签: 样式

大家好,我是前端西瓜哥。前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点。

默认的无序列表样式是这样的。

<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 进行位置的调整,所以我没有用这个。

结尾

小小的无序列表自定义样式也挺多门道的,希望对你有所帮助。

来自:https://blog.csdn.net/fe_watermelon/article/details/124877162

链接: https://fly63.com/article/detial/11607

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

如何用自己喜欢的 CSS 风格重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!