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

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Ja, gespeicherte MySQL-Prozeduren scheinen sehr s...

Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle

Inhaltsverzeichnis Gängige Komprimierungsformate:...

Einführung in HTML DOM_PowerNode Java Academy

Was ist DOM? Mit JavaScript können Sie das gesamt...

Kurze Analyse der Einführung und grundlegenden Verwendung von Promise

Promise ist eine neue Lösung für die asynchrone P...

So stellen Sie ElasticSearch in Docker bereit

1. Was ist ElasticSearch? Elasticsearch wird eben...

Eine einfache Methode zum regelmäßigen Löschen abgelaufener Datensätze in MySQL

1. Überprüfen Sie nach der Verbindung und Anmeldu...

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

1. Erstellen Sie einen neuen Benutzer wwweee000 [...

JavaScript-Canvas zum Erzielen eines Regentropfeneffekts

In diesem Artikelbeispiel wird der spezifische Co...

Der praktische Prozess des Login-Status-Managements im vuex-Projekt

Inhaltsverzeichnis Werkzeug: Anmeldeszenario: übe...