列出顶部有子弹的项目

时间:2013-08-26 20:43:14

标签: html css html-lists

是否可以使用CSS在文本顶部插入列表项<li>的项目符号?

enter image description here

1 个答案:

答案 0 :(得分:4)

使用项目符号作为背景图像:

ul {
  list-style-type: none;
  padding: 0;
  text-align: center; /* Optional, Just for demo */
}

ul li {
  background: url(path/to/bullet.ext) center top no-repeat;
  display: inline-block; /* <-- display list items in one line */
  padding-top: 10px;     /* <-- Change this according to the image size */
  /* Or: */
  /* padding: 10px 5px 0;     */
  /*          top  r&l bottom */
}

<强> JSBin Demo