20

この美しい例のように、プログレス バー タグにラベルを追加したいと考えています。

ここに画像の説明を入力

青が値で赤が最大値であると仮定すると、「35」のようなラベルをそこに追加するにはどうすればよいですか?

4

2 に答える 2

5

CSS を使用position:relativeして、テキストをバーに配置します。

短いバーの簡単で汚い解決策は次のとおりです。

position: relative;
left: -100px;

where left は、バーの横にあるテキストを強制的にその上に置きます。

コメントの中で、Matthias はleft、プログレス バーが 100% 幅の場合は機能しないと指摘しました。

バーの下のテキストを強制するため、機能しません。下のテキストを強制するのに十分な幅のバーでは失敗します。

代わりに、もう少し賢くなり、次のようにする必要があります。

    position: relative;
    top: -1.5em;
    margin-left: 50%;

ここで top:-1.5em が jsFiddle の左の調整を置き換えます。margin-left は、テキストを中央に配置しようとする試みです。実際には 50% 未満になるはずです。

テキストをバーの中央に配置するためのより良い解決策があれば、手で波打つ 50% の余白よりもハッキリしません。気軽にコメントしてください。これを再度調整します。

于 2012-09-17T02:50:34.853 に答える
3

私はこれを自分でやろうとしましたが、最終的に回避策に出くわしました。

疑似要素 :before を使用すると、別の方法で実行できます

content: attr(value)を次のように使用します: https://jsfiddle.net/96z0gwv7/1/ - リンクの CSS スタイルの詳細

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

毎回同じテキスト形式が必要ない場合は、 data 属性 (つまりdata-label )を使用できます。

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>
于 2016-09-18T05:18:33.277 に答える