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

Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen

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)

Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen

So setzen Sie das Passwort zurück, wenn das Ubuntu 18.04-Serverpasswort vergessen oder manipuliert wurde

Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

Detaillierte Analyse des MySQL Master-Slave-Verzögerungsphänomens und -prinzips

Kennen Sie alle 24 Methoden zur JavaScript-Schleifendurchquerung?

Implementierung von Check Constraints in MySQL 8.0

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Vertieftes Verständnis davon in JavaScript

Artikel empfehlen

CentOS7-Upgrade des Kernels kernel5.0 Version

Mit HTML+CSS3 implementierte Anmeldeschnittstelle

Detaillierte Erläuterung der Verwendung des MySQL-Auswahl-Cache-Mechanismus

Aktivieren und Konfigurieren des MySQL-Protokolls für langsame Abfragen

Detaillierte Erläuterung der Konfiguration des Samba-Ordnerfreigabeservers unter CentOS

So führen Sie den sudo-Befehl aus, ohne in Linux ein Passwort einzugeben

Zusammenfassung der Unterschiede zwischen SQL und NoSQL

So ändern Sie die Tomcat-Portnummer in Linux

Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen

Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs

Lösungen zur Verarbeitung und Reparatur historischer Linux-Images

Detaillierte Erklärung zur Verwendung von Titel-Tags und Absatz-Tags in XHTML

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Einfaches Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 5.7.20

Grundlegendes Nutzungs-Tutorial zur IPTABLES-Firewall unter LINUX