So implementieren Sie die Kontrollkästchen- und Radioausrichtung

So implementieren Sie die Kontrollkästchen- und Radioausrichtung

Nicht nur das Verhalten verschiedener Browser ist unterschiedlich, auch unterschiedliche Schriftarten und Textgrößen verhalten sich unterschiedlich.

Kontrollkästchen und Optionsfeld des Formulars zurücksetzen

Da die Analyse verschiedener Browser unterschiedlich ist, haben einige Standardränder und andere eine Standardpolsterung. Selbst wenn bei IE6 und 7 die Ränder und die Polsterung auf 0 gesetzt sind, ist der von ihnen belegte Platz immer noch relativ groß. Daher ist es dennoch erforderlich, sie zurückzusetzen, wodurch viele unnötige Probleme gelöst werden können.

Hier ist die Lösung für die Schriftart Arial mit 14 Pixeln:

1. CSS-Code

 .form { Schriftart: 14px/18px Arial, Helvetica, serifenlos; }
.form-Eingabe, .form-Beschriftung { vertikale Ausrichtung: Mitte; }
.form label { Rand rechts: 6px; }
.form_checkbox, .form_radio {
    Rand: 0 3px 0 0;/*Abstand zwischen dem Text rechts*/
    Polsterung: 0;
    Breite: 13px;
    Höhe: 13px;
    /*IE7 und IE6 legen je nach Schriftgröße unterschiedliche Werte fest*/
    *vertikale Ausrichtung: 1px;
}

2. HTML-Code

 <Formularname="Formular1" Methode="Post" Aktion="" Klasse="Formular">
  <p>
    <input Typ="Checkbox" Name="Checkbox4" ID="Checkbox4" Klasse="Formular_Checkbox">
    <label für="checkbox4">checkbox4</label>
    <input Typ="Checkbox" Name="Checkbox5" ID="Checkbox5" Klasse="Formular_Checkbox">
    <label für="checkbox5">checkbox5</label>
    <input Typ="Checkbox" Name="Checkbox6" ID="Checkbox6" Klasse="Formular_Checkbox">
    <label für="checkbox6">checkbox6</label>
  </p>
  <p>
    <Eingabetyp="Radio" Name="Radio" ID="Radio4" Wert="Radio4" Klasse="Form_Radio">
    <label für="radio4">radio4</label>
    <Eingabetyp="Radio" Name="Radio" ID="Radio5" Wert="Radio5" Klasse="Form_Radio">
    <label für="radio5">radio5</label>
    <Eingabetyp="Radio" Name="Radio" ID="Radio6" Wert="Radio6" Klasse="Form_Radio">
    <label für="radio6">radio6</label>
  </p>
</form>

3. Rendern

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Gleichzeitig hoffe ich auch, dass Sie 123WORDPRESS.COM unterstützen können!

<<:  JavaScript-Interview: So implementieren Sie die Methode zur Array-Abflachung

>>:  CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern

Artikel empfehlen

Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code

Inhaltsverzeichnis Grundlegende HTML-Struktur Gen...

Warum wird IE6 von den meisten Leuten verwendet?

In erster Linie bin ich Webdesigner. Genauer gesag...

Fassen Sie den User-Agent beliebter Browser zusammen

1. Grundkenntnisse: HTTP-Header-Benutzeragent Use...

So ändern Sie das Standardnetzwerksegment der Docker0-Brücke in Docker

1. Hintergrund Wenn der Docker-Dienst gestartet w...

Starten Sie eine lokale Kubernetes-Umgebung mit Kind und Docker

einführen Haben Sie schon einmal einen ganzen Tag...

HTML-Beispielcode zum Lesen und Anzeigen von Bildern in einem lokalen Ordner

Ein Zweck Wählen Sie auf der HTML-Seite einen lok...

Eine kurze Analyse der Crontab-Aufgabenplanung in Linux

1. Erstellen Sie eine Planungsaufgabe Anweisung c...

Beispiel für einen Persistenzbetrieb mit Gearman + MySQL

Dieser Artikel verwendet die Gearman+MySQL-Method...

XHTML-Erste-Schritte-Tutorial: Was ist XHTML?

Was ist HTML? Um es einfach auszudrücken: HTML wi...

Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle

Definition und Verwendung Die Anzeigeeigenschaft ...

Erstellen eines Redis-Clusters auf Docker

Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...