2

以下のフィドルをよく見てみると、線が終わりに近づくと、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/です。

誰かがこのことを修正する方法を教えてもらえますか?

4

3 に答える 3

4

display:inline を inline-block に変更

.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/

于 2013-06-15T07:49:44.970 に答える
1

CSSを に置き換える.popular ul li:beforeと、問題が解決します。.popular ul li a:before

更新された JSFiddleを参照してください。

編集: @Nagarjun が指摘したように、これは Chrome では正しく機能しません。

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

したがって、おそらく彼の答えを使用したいと思うでしょう。

于 2013-06-15T07:49:36.277 に答える
0

これを試して

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

このクラスを置き換えます

.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;

}
于 2013-06-15T07:49:56.770 に答える