Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
468 views
in Technique[技术] by (71.8m points)

html - How to style a horizontal list with bullets between items using CSS?

I'm not sure how to build a horizontal list that looks like this:

Centered list with bullets between items

Here are the rules:

  • There is an unlimited number of items in the list.
  • Each item should be on a single line and not wrap to a 2nd line.
  • Multiple items can be on a single line if there is space for them to fit
  • If multiple items are on a single line, they should be separated by a divider
  • The divider looks like a bullet, but it could be an image
  • Need it to work in modern browsers as well as IE8+

The thing I'm not sure how to do is to make the bullets appear only between items, and not also before or after each row of items.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

For those of you who don't have to worry about IE8, this is as simple as:

ul li { list-style: none; display: inline; }
ul li:after { content: " 0b7"; }
ul li:last-child:after { content: none; }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...