水平プログレスバーの最後にテキストを表示するための実装コードの CSS 記述

問題の説明

仕事で以下の成果を達成したいと考えています。

ここに画像の説明を挿入

解決

div タグに相対配置を追加し、絶対配置を使用して右端に配置します。

<div class="content">
  <div class="bar first" style="width:100%">
    <span>688</span>
  </div>
  <div class="bar second" style="width:50%">
    <span>688</span>
  </div>
  <div class="bar third" style="width:80%">
    <span>688</span>
  </div>
</div>

あなた自身の解決策

。バー {
  高さ: 12px;
  上マージン: 1px;
  位置: 相対的;
  ＆。初め {
    背景画像: 線形グラデーション(90度, #ecf848 0%, #f9eab9 99%);
  }
  ＆。2番 {
    背景画像: 線形グラデーション(90度, #f5b549 0%, #f9d6b9 100%);
  }
  ＆。三番目 {
    背景画像: 線形グラデーション(90度, #f57849 0%, #f9c7b9 100%);
  }
  スパン{
    位置: 絶対;
	右: 0;
    フォントサイズ: 12px;
    色: rgba(255, 255, 255, 0.7);
  }
}

結果：

上記の記述によると、span タグの右端は親タグ div の右端としか重なることができず、目的を達成できません。解決策は、span タグの値を計算し、計算された長さに設定することです。

ここに画像の説明を挿入

上記の実装は js に頼る必要があり面倒すぎることを考慮して、CSS だけで目的を達成する方法はないか考えてみましょう。

ソリューション 1: 左: 100%;

。バー {
  高さ: 12px;
  上マージン: 1px;
  位置: 相対的;
  ＆。初め {
    背景画像: 線形グラデーション(90度, #ecf848 0%, #f9eab9 99%);
  }
  ＆。2番 {
    背景画像: 線形グラデーション(90度, #f5b549 0%, #f9d6b9 100%);
  }
  ＆。三番目 {
    背景画像: 線形グラデーション(90度, #f57849 0%, #f9c7b9 100%);
  }
  スパン{
    位置: 絶対;
    左: calc(100% + 8px);
    フォントサイズ: 12px;
    色: rgba(255, 255, 255, 0.7);
  }
}

左の幅は親コンテナの幅を参照します。

解決策 2: right:0; transform: translate(100%, 0)

。バー {
  高さ: 12px;
  上マージン: 1px;
  位置: 相対的;
  ＆。初め {
    背景画像: 線形グラデーション(90度, #ecf848 0%, #f9eab9 99%);
  }
  ＆。2番 {
    背景画像: 線形グラデーション(90度, #f5b549 0%, #f9d6b9 100%);
  }
  ＆。三番目 {
    背景画像: 線形グラデーション(90度, #f57849 0%, #f9c7b9 100%);
  }
  スパン{
    位置: 絶対;
    右:0;
    変換: translate(100%, 0);
    フォントサイズ: 12px;
    色: rgba(255, 255, 255, 0.7);
  }
}

transform: translate はコンテンツの幅を参照します

これで、水平プログレスバーの末尾に表示されるテキストを実装するための CSS コードに関するこの記事は終了です。関連する CSS 水平プログレスバーテキスト表示コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL セキュリティ管理の詳細

>>: Linux での NTP サーバー設定の詳細な手順