I've got a minor problem and was wondering if anyone could come up with a quickfix?
The problem
I've got a ul of lis which uses custom bullet points using li:before { content: etc. I'm trying to get the words to align properly - you can see on the fourth li item, when the words wrap to the next line they don't start under the word but under the bullet.
Attempted fixes
- Thinking that it's a problem doing the bullets using li:before, I tried other ways, but...
- I don't want to use the built in li bullet styles (they ugly)
- I've tried using the font-awesome bullet stylings but the same thing happens (I presume they also use the li:before method)
- I don't want to manually space out the second line because changing browser sizes and what not
- Using the li:before method I tried using absolute positioning to shift the bullets left:3px (as recommended in a similar stackoverflow question) but haven't got that to work either.
Example
Click here to see a demo of the problem:
http://jsfiddle.net/MS9Z9/
(below code is abbreviated)
.panel-body ul li {
list-style-type:none;
}
.panel-body ul li:before {
content:"27A80a00a0";
}
Solutions would be great but even ideas are appreciated, thank you!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…