列出顶部有项目符号的项目 [英] List items with bullets on top

问题描述

是否可以在文本顶部使用列表项< li> 的项目符号，如下所示使用CSS？

Is it possible to have the bullet point of list items <li> on top of the text like in the following using CSS?

推荐答案

使用项目符号作为背景图片：

Use bullets as background image:

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 */
}

strong> JSBin演示

JSBin Demo

这篇关于列出顶部有项目符号的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！