Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

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

html - CSS: Control space between bullet and <li>

I'd like to control how much horizontal space a bullet pushes its <li> to the right in an <ol> or <ul>.

That is, instead of always having

*  Some list text goes
   here.

I'd like to be able to change that to be

*         Some list text goes
          here.

or

*Some list text goes
 here.

I looked around but could only find instructions for shifting the entire block left or right, for example, http://www.alistapart.com/articles/taminglists/

Question&Answers:os

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

1 Answer

0 votes
by (71.8m points)

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

li span {
  position: relative;
  left: -10px;
}
<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...