Perfekte Lösung zur vertikalen Zentrierung von Formelementen
|
Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/> <title>Perfekte vertikale Zentrierung von Formularelementen</title> <style type="text/css"> *{Auffüllung:0; Rand:0;} body{font:14px/1.231 Tahoma, Geneva, sans-serif; background-color:#D1D5E7;} label{cursor:pointer; vertical-align:middle;} Eingabe {vertikale Ausrichtung: Mitte; Rand: 5px;} .warp{ Rand:100px 350px;} Spanne {vertikale Ausrichtung: Mitte; Textdekoration: Unterstreichung;} img{ vertikale Ausrichtung: Mitte; Rahmen: 1px durchgehend #CCF;_Rand unten: 1px;} p{Schriftgröße:14px;} h2{Schriftgröße:16px;} </Stil> </Kopf> <Text> <div Klasse="Warp"> <h2>Optionsfelder und Kontrollkästchen sind sehr klein und nicht leicht anzuklicken, was bei vielen Benutzern Verwirrung stiftet und zu einer schlechten Benutzererfahrung führt</h2> <p>Bitte sehen Sie sich die perfekte Lösung für [Ein Hauch von Coolness] an: Perfekte vertikale Zentrierung, klicken Sie auf den Text, um ihn auszuwählen, verwenden Sie eine Tastenkombination, um ihn auszuwählen, bewegen Sie die Maus über den Text, um die Handform anzuzeigen (was bedeutet, dass er anklickbar ist)</p> <input name="aaa" id="aaa" type="checkbox" value=""/> <label for="aaa">X×Ich bin ein perfektes Kontrollkästchen</label> <input name="ccc" id="ccc" type="checkbox" accesskey="2" value=""/> <label for="ccc">Ich unterstütze die Auswahl mit Alt+2 über die Tastatur (<span>2</span>)</label> <input name="bbb" id="bbb" type="radio" value=""/><label for="bbb">X×Ich bin ein perfektes Optionsfeld</label> <label for="fff">X×Ich bin ein perfektes Textfeld</label><input id="fff" type="text"/> <input name="eee" id="eee" type="checkbox" value=""/><span>Bilder können auch zentriert werden</span><img width="270" height="129" usemap="#mp" src="upload/2022/web/baidu_sylogo1.gif"/> </div> </body> </html> |
<<: Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“
>>: Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS
Artikel empfehlen
Detaillierte Methode zur Verwendung von GoAccess zum Analysieren von Nginx-Protokollen
Vor kurzem wollte ich Goaccess verwenden, um Ngin...
Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen
Inhaltsverzeichnis Überblick in Operatorverfeiner...
So verwalten Sie Benutzer und Gruppen beim Ausführen von Docker
Docker ist ein Verwaltungstool, das Prozesse als ...
Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen
Deaktivieren und Aktivieren von MySQL-Fremdschlüs...
Implementierung von Zehntausenden gleichzeitigen Verbindungen auf einer einzigen Maschine mit nginx+lua
nginx ist unser am häufigsten verwendeter Server,...
Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS
Vorwort Heute habe ich das Erzeugungsmuster im En...
WebStorm kann die Lösung der Vue3-kombinierten API nicht korrekt identifizieren
1 Problembeschreibung Die kombinierte API von Vue...
Detaillierte Schritte zur Installation von MySQL mit Cluster-RPM
MySQL-Datenbank installieren a) Laden Sie das MyS...
Schritte zum Erstellen eines Docker-Images mit Dockerfile
Dockerfile ist eine Textdatei, die Anweisungen en...
Detailliertes Tutorial zum Bereitstellen von Springboot oder Nginx mit Kubernetes
1 Einleitung Nachdem „Maven Springboot mit einem ...
Ubuntu16.04 Installation mysql5.7.22 Grafik-Tutorial
Installations-Tutorial für VMware12.0+Ubuntu16.04...
Analysieren der häufig verwendeten v-Anweisungen in vue.js
Inhaltsverzeichnis Erklärung des V-Texts bei „if“...
Detaillierte Erläuterung des direkten Routings bei der hostübergreifenden Kommunikation von Docker-Containern
Überblick Was das aktuelle Standardnetzwerk von D...
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...
10 sehr gute CSS-Fähigkeiten sammeln und teilen
Hier können Sie durch geschickten Einsatz von CSS-...