HTML & CSS – Styling List

前言

ul > li 经常会用到, 它原本的 style 很丑, 这篇介绍如果修改它.

以前学 W3Schools 的时候也有记入过: 

参考:

Youtube – HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists

Youtube – Styling your list-items just got so much easier with this pseudo-element!

Youtube – Next-Level List Bullets With CSS ::marker

HTML 默认

<div class="container">
  <ul>
    <li>item1li>
    <li>item2li>
  ul>
div>

 效果

黑框是 container 范围. 可以看到 bullet 是在外面的.

list-style-type

常见的 type 有: circle, alpha, roman, decimal

甚至可以直接写 string 哦

li {
  list-style-type: "> ";
}

效果

list-style-position

我用 text-align: center 比较明显可以看出效果

设置 bullet 在里面还是外面. 默认是 outside, 而且是 out of the container 很恐怖一下...

Tailwind CSS 的解释图, 非常清晰:

Custom Styling

如果要完全控制的话, 可以把 list-style-type: none. 然后通过 ::before 自己插入想要的 svg 图, 等等.

.container {
  border: 1px solid black;
  width: fit-content;
  min-width: 200px;

  padding: 0.5rem;
  ul {
    list-style-type: none;
    li {
      &::before {
        font: var(--fa-font-solid);
        content: "\f00c";
        padding-right: 0.25rem;
      }
    }
  }
}

效果

另一种方式是用 build-in 的 ::marker, 虽然它没有 cover 100% 场景 (不支持 margin, padding), 但是通常够用.

ul {
  font-size: 2rem;
  li {
    padding-left: 0.5rem;
  }
  ::marker {
    color: red;
    font: var(--fa-font-solid);
    content: "\f00d";
  }
}

marker 可以选中 bullet, 然后就可以自定义内容了. 上面用了 fontawesome 的 code. 效果:

也可以换成 text, url(svg..) 等等

::marker {
  color: red;
  content: "> " counter(list-item);
}

还可以配上 counter 输出 index 哦.

spacing between bullet and li

这个满痛疼的, ::marker 写不到 padding, margin 所以它和 value 是黏在一起的.

像上面这个例子的 spacing, list-style-position 必须是 outside, 因为 inside 根本没法做 spacing.

要让它进入 container, 做法是让 container 有 padding-left.

然后 bullet 和 item 是粘一起的, 要分开就要给 li padding-left. 

2 个 padding-left 完成 spacing 非常不直观. 所以还是比较推荐使用 ::before 的做法.

其它 spacing 做法参考:

CSS – Indenting the second line of LI (List Items)

(新)CSS(新)HTML5

相关

标签