CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens

Problembeschreibung

Folgende Ergebnisse möchte ich bei meiner Arbeit erreichen:

Bildbeschreibung hier einfügen

Lösung

Fügen Sie dem Div-Tag eine relative Positionierung hinzu und verwenden Sie dann die absolute Positionierung, um es ganz rechts zu positionieren.

<div Klasse="Inhalt">
  <div Klasse="Bar zuerst" Stil="Breite:100%">
    <span>688</span>
  </div>
  <div Klasse = "Bar Sekunde" Stil = "Breite: 50%">
    <span>688</span>
  </div>
  <div Klasse = "bar third" Stil = "width:80%">
    <span>688</span>
  </div>
</div>

Ihre eigene Lösung

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
	rechts: 0;
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}

Ergebnis:

Gemäß dem obigen Schreiben kann sich die äußerste rechte Seite des Span-Tags nur mit der äußersten rechten Seite des übergeordneten Tags Div überlappen, wodurch das Ziel nicht erreicht werden kann. Die Lösung besteht darin, den Wert des Span-Tags zu berechnen und ihn dann direkt auf die berechnete Länge einzustellen.

Bildbeschreibung hier einfügen

Wenn man bedenkt, dass die obige Implementierung auf js basieren muss und zu mühsam ist, überlegen Sie, ob es eine Möglichkeit gibt, das Ziel nur mit CSS zu erreichen?

Lösung 1: links: 100 %;

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
    links: calc(100% + 8px);
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}

Die Breite links bezieht sich auf die Breite des übergeordneten Containers.

Lösung 2: right:0; transform: translate(100%, 0)

.Bar {
  Höhe: 12px;
  Rand oben: 1px;
  Position: relativ;
  &.Erste {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #ecf848 0 %, #f9eab9 99 %);
  }
  &.zweite {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f5b549 0 %, #f9d6b9 100 %);
  }
  &.dritte {
    Hintergrundbild: linearer Farbverlauf (90 Grad, #f57849 0 %, #f9c7b9 100 %);
  }
  Spanne{
    Position: absolut;
    rechts:0;
    transformieren: übersetzen(100 %, 0);
    Schriftgröße: 12px;
    Farbe: rgba(255, 255, 255, 0,7);
  }
}

transform: translate bezieht sich auf die Breite des eigenen Inhalts

Damit ist dieser Artikel über den CSS-Code zur Implementierung des am Ende eines horizontalen Fortschrittsbalkens angezeigten Textes abgeschlossen. Weitere relevante CSS-Inhalte zur Textanzeige für horizontale Fortschrittsbalken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Details zur MySQL-Sicherheitsverwaltung

>>: Detaillierter Prozess der NTP-Serverkonfiguration unter Linux

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens

Problembeschreibung

Lösung

Wenn man bedenkt, dass die obige Implementierung auf js basieren muss und zu mühsam ist, überlegen Sie, ob es eine Möglichkeit gibt, das Ziel nur mit CSS zu erreichen?

Lösung 1: links: 100 %;

Lösung 2: right:0; transform: translate(100%, 0)

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

Prinzip des Ausblendens von CSS-Elementen und display:none und visibility:hidden

Mysql löst das N+1-Abfrageproblem der Datenbank

IP-Whitelist für die Linux-Serverkonfiguration zum Verhindern von Remote-Anmeldungen und Port-Offenlegung

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

Fortgeschrittene Techniken zur Verwendung von CSS (im tatsächlichen Kampf verwendet)

Beispiel einer langsamen MySQL-Abfrage

Tutorial zu HTML-Formular-Tags (3): Eingabe-Tag

js implementiert das klassische Minesweeper-Spiel

Detaillierte Erklärung der Listendarstellung von Vue

Artikel empfehlen

MySQL-Anmeldefehler beheben: „Zugriff für Benutzer ‚root‘@‚localhost‘ verweigert“

Eine kurze Einführung in den MySQL-Dialekt

Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)

JavaScript imitiert den Jingdong-Karusselleffekt

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Detaillierte Erklärung des Vue3-Sandbox-Mechanismus

Analyse des Idea-Compiler-Vue-Einrückungsfehlerproblemszenarios

Implementierung der Nginx-Flusskontrolle und Zugriffskontrolle

Erstellen Sie einen benutzerdefinierten Taskleistenindikator für Ihre Aufgaben unter Linux

jQuery-Plugin zur Implementierung des Suchverlaufs

Tutorial-Diagramm zur Installation von CentOS und Qt in einer virtuellen VMware-Maschine

Über das Vue Virtual Dom-Problem

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Vue Element-ui implementiert Baumsteuerungsknoten und fügt Symbole hinzu, detaillierte Erläuterung

Navicat für MySQL 11 Registrierungscode\Aktivierungscode-Zusammenfassung