Aligning li text that wraps when using custom bullet point

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!

---

You can do

http://jsfiddle.net/MS9Z9/7/

.panel-body ul li:before {
    content: "➨  ";
    left: 7px;
    position: absolute;
}

.panel-body ul li {
    border-bottom-style: solid;
    border-color: #ccc;
    list-style-type: none;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 1.5em;
    position: relative;
}

Position the before content absolute, make your li relatively positioned and you can freely adjust the custom bullet

Another alternative is just to float the before content left http://jsfiddle.net/MS9Z9/12/

---

you could also use display: table property on the a tag, see

JSFiddle

链接地址: http://www.djcxy.com/p/80304.html

上一篇: 几乎没有踪迹的神秘铁轨错误

下一篇: 对齐使用自定义项目符号点时包装的李文本