CSS: Which property should I use here to break the line? - css

Question

Take a lot at the fiddle below and you would observe that when the line is about to end, the li elements break abruptly. Like, in the first line, after 4 li elements, the next li element breaks and the red circle comes in the same line while the text part moves to the next line.
Here is how I have defined the list elements in CSS:
.popular ul li:before { // Its this part of the code which is making the things
content: "\2022 "; // happen like this. If I remove this part, everything
color:red; // works fine.
}
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Here is the JsFiddle Link http://jsfiddle.net/e7rjW/.
Could someone please tell me how to correct this thing?

Answer 1

Change the display:inline to inline-block
.popular ul li{
display: inline-block;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Fiddle: http://jsfiddle.net/e7rjW/5/

Answer 2

Replacing .popular ul li:before with .popular ul li a:before in the CSS fixes your issue.
See the updated JSFiddle.
EDIT: This doesn't work correctly in Chrome, as pointed out by #Nagarjun:
http://img577.imageshack.us/img577/6770/o7g.png
So you'll probably want to use his answer.

Answer 3

try this
http://jsfiddle.net/e7rjW/6/
replace this classess
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
text-wrap:none;
float:left;
}
.popular ul li a{
display: inline-block;
color:#777;
font-family:Arial;
font-size:15px;
font-weight:700;
text-decoration:none;
text-shadow:0 1px 7px #fff;
}