Question

I was trying to add a awesomefont list style to the <li> elements.

<ul>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
</ul>

and css

li{
    list-style:none;
}

But when we resize the window, the li text goes under the list style circle which is not acceptable. I think it should start after the list style circle even if the text goes in the second line.

Can anybody suggest me a better way to do it? Jsfiddle: http://jsfiddle.net/n6bf3/

Was it helpful?

Solution

The reason the list marker is not behaving like a list marker is because the marker you are using is not a real list marker, it is an element inside of the list element. The glyph and the text are in the same container so it wraps under it according to normal flow.

You could hack together ways to make it work as expected but just using a real marker would be much easier and lead to cleaner, more maintainable code.

<li>
<a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
</li>

Using the default circles:

li{
    list-style: circle;
}

http://jsfiddle.net/UselessCode/B842c/

If you have to have a custom image instead of one of the default markers you can do that with marker styling too:

li{
    list-style-image: url("circle-bullet.png")
}

http://jsfiddle.net/UselessCode/fPBrS/

OTHER TIPS

There's a few ways to do it. Basically, if you want the circle to show next to the anchor text even if the text has wrapped, you are essentially wanting the CSS to layout in rows.. so in that case, this is the simplest way:

li{
    list-style:none;
    display:table-row;
}

li *
{
    display:table-cell;
}

http://jsfiddle.net/mL34R/1/

However, table layout in css can be finicky, so here's another way that places the elements next to each other as inline blocks, but allows the anchor content to wrap normally:

li{
    list-style:none;
    white-space:nowrap;
}

li i
{
    display:inline-block;
    vertical-align:top;
}

li a
{
    display:inline-block;
    white-space:normal;
}

http://jsfiddle.net/pV4cp/

http://jsfiddle.net/n6bf3/2/

i {
    position: absolute;
}
a {
    display: block;
    padding-left: 16px;
}

Positioning the i absolutely will get it out of a's way, so a can get it's padding-left (which only works properly if a is block).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top