Question

在下面的小提琴上花了很多时间，你会发现当线条即将结束时，li元素会突然中断。就像在第一行中，在4个li元素之后，下一个li元素断开，红色圆圈在同一行中，而文本部分移动到下一行。

以下是我在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;
}

以下是JsFiddle链接http://jsfiddle.net/e7rjW/。

有人可以告诉我如何纠正这件事吗？

Answer 1

更改显示：内联到内联块

.popular ul li{
  display: inline-block;
  padding: 4px 7px 4px 5px;
  background-color:#ededed;
  border-radius:5px;
  border:2px solid #dcdcdc;
}

小提琴：http://jsfiddle.net/e7rjW/5/

Answer 2

在CSS中用.popular ul li:before替换.popular ul li a:before可以解决您的问题。

请参阅the updated JSFiddle。

编辑：这在Chrome中无法正常运行，正如@Nagarjun所指出的那样：

http://img577.imageshack.us/img577/6770/o7g.png

所以你可能想用他的答案。

Answer 3

试试这个

http://jsfiddle.net/e7rjW/6/

替换此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;

}

CSS：我应该在这里使用哪个属性来打破界限？

3 个答案: