5

こんにちは、私は 5 つ星の評価システムを持っています。4 つだけではなく 4.3 つ星を追加できるようにしたいと思います。どうすればよいですか? 私の現在のコードは以下のとおりです。

<center>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star"></span>
</center>
4

5 に答える 5

3

私はこれが機能することを発見しました。主な欠点は、フォント サイズに基づいて特定のクラスのスタイルを設定する必要があることです。

HTML:

 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star half-star"></i>

CSS:

.half-star {
        width:5px; // Roughly half the font size
        overflow:hidden;
 }
于 2015-11-07T05:35:59.517 に答える
1

これらの答えは両方とも正しく (複数の色に関して)、長くて正確すぎる (ピクセルを使用して物を移動する div の重複) ですが、:after セレクターを含む素晴らしいハックを見つけました。

基本的に、背景色がどうなるかわかっている場合は、次の方法で文字の半分 (または必要な割合) をカバーできます。

HTML:

     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star half-star"></span>`

CSS:

   .half-star {
     letter-spacing: -0.5em;
       &:after {
       position: absolute;
       content: "";
       left: 0.5em;
       width: 0.5em;
       height: 1em;
       background-color: $body-bg;
     }
   }

まず、letter-spacing をフォントのデフォルトの半分に設定します。これにより、次のテキスト、星、またはその他の要素が正しく配置されます。$body-bg次に、星の幅の半分、星の半分の位置に絶対配置ブロックを作成します(これは星 4.5 の評価用です)。その小数点を変更して、希望する評価に合わせることができます。

グリフの色を変更することはできず、最初のグリフに別の色またはグリフを追加するには、はるかに多くのハッキングが必要になります (私が示したのと同じように考えますが、別の方向から) が、Javascript なしで純粋に行うことができます。このように HTML と CSS を使用します。

于 2015-01-20T01:39:47.973 に答える