CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens
ProblembeschreibungFolgende Ergebnisse möchte ich bei meiner Arbeit erreichen:
LösungFü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.
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);
}
}
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);
}
}
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
Artikel empfehlen
HarborRestart-Vorgang nach dem Ändern der Konfigurationsdatei
Ich werde nicht viel Unsinn erzählen, schauen wir...
Eine kurze Diskussion über JS-Verpackungsobjekte
Inhaltsverzeichnis Überblick Definition Instanzme...
Detaillierte Erläuterung zweier Möglichkeiten der Linux-Dienstverwaltung: service und systemctl
1.Service-Befehl Der Servicebefehl geht tatsächli...
Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten
1. Einige Tipps zu mit class in react deklarierte...
Was Sie über die Transaktionsisolierung von msyql wissen müssen
Was ist eine Transaktion? Eine Transaktion ist ei...
Beispielcode des Spread-Operators und seiner Anwendung in JavaScript
Der Spread-Operator ermöglicht die Erweiterung ei...
Lösung für den Docker-Container, der nicht gestoppt und gelöscht werden kann
Suchen Sie die ID des laufenden Containers Docker...
Benutzerdefinierte optionale Zeitkalenderkomponente von Vue
In diesem Artikelbeispiel wird der spezifische Co...
Verwendung des Linux-Befehls usermod
1. Befehlseinführung Der Befehl usermod (user mod...
Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5
einführen Die RANGE-Partitionierung basiert auf e...
Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux
Linux erstellt NFS-Server Um den Datenaustausch z...
Standard-CSS-Stil der XHTML-Sprache
html,Adresse, Blockzitat, Körper, dd, div, dl,dt,...
Die jQuery + Swiper-Komponente realisiert den Umschalteffekt der gleitenden Jahresregisterkarte in der Zeitleiste
Ergebnis: Implementierungscode: Muss mit der Swip...
So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)
Konfigurationsanweisungen Linux-System: CentOS-7....
Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen
Das Internet ist bereits voll von Artikeln dieser...