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

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;

}