Wie richtet man ein Kontrollkästchen und seine Beschriftung mithilfe von CSS in verschiedenen Browsern aus?-CSS-Tutorial-php.cn

Wie richtet man ein Kontrollkästchen und seine Beschriftung mithilfe von CSS in verschiedenen Browsern aus?

PHPz

Freigeben： 2023-08-27 10:49:02

nach vorne

915 Leute haben es durchsucht

Wie richtet man ein Kontrollkästchen und seine Beschriftung mithilfe von CSS in verschiedenen Browsern aus?

Webformulare werden häufig in modernen Websites verwendet. Das Ausrichten dieser Kontrollkästchen und ihrer Beschriftungen in verschiedenen Browsern ist jedoch eine Herausforderung Verschiedene Browser und Geräte können leicht unterschiedliche Stile und Darstellungsmethoden haben. Um dieses Problem zu lösen, werden wir verschiedene Möglichkeiten diskutieren, die Kontrollkästchen zusammen mit ihren Beschriftungen auf Cross-Browsern auszurichten.

Wie werden Kontrollkästchen in verschiedenen Browsern angezeigt?

Verschiedene Browser bieten unterschiedliche Kompatibilität für Kontrollkästchen in Webformularen. Im Internet Explorer hängt die Darstellung der Kontrollkästchen von der Version ab. Ältere Versionen unterstützen die neuesten CSS-Funktionen nicht, was die Ausrichtung von Kontrollkästchen und ihren Beschriftungen erschwert. Das Gleiche gilt für Versionen von Mozilla Firefox und Safari.

Um eine konsistente Anzeige und korrekte Ausrichtung von Kontrollkästchen und Beschriftungen sicherzustellen, müssen wir daher in CSS browserübergreifende Kompatibilitätstechniken verwenden.

Hinweis− Beim Erstellen von Webformularen empfiehlt es sich im Allgemeinen, das Attribut for mit jeder Art von Eingabeelement zu verwenden. Dadurch wird sichergestellt, dass das Kontrollkästchen und seine Beschriftung ausgerichtet sind. Stellen Sie immer sicher, dass der for-Attributwert von mit dem id-Attributwert von übereinstimmt.

Wir verfügen über verschiedene CSS-Techniken und -Praktiken, um die ordnungsgemäße Ausrichtung von Kontrollkästchen und Beschriftungen auf verschiedenen Plattformen sicherzustellen. Einige davon werden im Folgenden besprochen.

Markieren Sie Kontrollkästchen mithilfe der vertikalen Ausrichtung

Mithilfe der Anzeige- und Vertical-Alignment-Attribute können wir das Kontrollkästchen und seine Beschriftung ausrichten.

Beispiel

Hier können wir mit dem Attribut „Anzeige: Inline-Block“ den Anzeigetyp des Kontrollkästchens auf „Inline-Block“ festlegen. Und das Attribut „vertikal-align: middle“ richtet das Kontrollkästchen vertikal an der Mitte seines Containers aus.

Durch die gemeinsame Verwendung dieser beiden Eigenschaften wird sichergestellt, dass das Kontrollkästchen in derselben Zeile wie die anderen Elemente angezeigt wird und in der Mitte der Zeile ausgerichtet ist. Daher werden das Kontrollkästchen und seine Beschriftung auf derselben Zeile ausgerichtet, sodass der Text der Beschriftung mit dem Kontrollkästchen zentriert bleibt.

<html>
<head>
   <style>
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: middle;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2> Checkbox </h2>
   <div class="container">
      <label for="demo">
      <input type="checkbox" id="demo"> Option 1 </label>
      <br>
      <label for="demo">
      <input type="checkbox" id="demo"> Option 2 </label>
   </div>
</body>
</html>

Nach dem Login kopieren

Verwendung von CSS Flexbox

Wir können das -Element als flexiblen Container verwenden, um Kontrollkästchen und Beschriftungen auszurichten.

Beispiel

In diesem Beispiel verwenden wir display:flex, um das Etikettenelement zu einem Flex-Container zu machen. Die Eigenschaft align-items: center zentriert den Text der Beschriftung mit dem Kontrollkästchen.

Obwohl wir flex: none im Eingabeelement verwenden, um sicherzustellen, dass sich die Breite des Kontrollkästchens nicht ändert, wenn sich die Größe des Etiketts (Containers) ändert. Gleichzeitig ermöglicht die Verwendung dieser drei Eigenschaften die horizontale Zentrierung des Kontrollkästchens und der Beschriftung.

<html>
<head>
   <style>
      .container {
         display: flex;
         align-items: center;
         padding: 2px;
      }

      input[type=checkbox] {
         flex: none;
      }
   </style>
</head>
<body>
   <h2> Fruits </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Mango </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Banana </label>
   </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie das Attribut „Vertikale Ausrichtung“

In einigen modernen Browsern sind Kontrollkästchen standardmäßig an der Grundlinie des Etikettentexts ausgerichtet. Um jedoch ihre korrekte Ausrichtung sicherzustellen, können wir das Attribut vertical-align für Beschriftungen und Eingabeelemente auf „top“ setzen.

Beispiel

Im folgenden Beispiel verwenden wir das Attribut "display: inline-block", um Beschriftungs- (class="container") und Eingabeelemente als Inline-Block-Elemente anzuzeigen. Dadurch werden beide Elemente inline und ihre Größe kann geändert werden

"input[type="checkbox"]" ist ein Selektor, der verwendet wird, um den Kontrollkästchentyp des Eingabeelements auszuwählen oder anzupassen.

Zusätzlich haben wir das Attribut „vertikal-align: top“ verwendet, um das Element vertikal an der Oberseite seines Containers auszurichten. Verwenden Sie diese Eigenschaften, um sowohl die Beschriftung als auch das Eingabeelement so festzulegen, dass sie beide vertikal am oberen Rand des Containers ausgerichtet sind und relativ zueinander inline angezeigt werden.

<html>
<head>
   <style>
      .container {
         display: inline-block;
         vertical-align: top;
         margin-right: 15px;
         letter-spacing: 1px;
      }
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: top;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Eigenschaften „Position“ und „Vertikale Ausrichtung“

Behalten Sie das Attribut Position des Eingabeelements bei Relativ und verwenden Sie das Attribut Vertical-Align: Bottom, um auch Kontrollkästchen und Beschriftungen auszurichten.

Beispiel

Hier machen wir das Etikett zu einem Block-Level-Element, sodass es die gesamte Breite des Behälters einnimmt. Entfernt das padding und margin aus dem Eingabeelement. Verwenden Sie das Attribut vertical-align: unten, um das Kontrollkästchen vertikal am Boden des Containers auszurichten. Verwenden Sie das Attribut Position, um das Kontrollkästchen an der Beschriftung auszurichten.

<html>
<head>
   <style>
      CSS code * {
         padding: 0;
         margin: 0;
      }
      .container {
         display: block;
         padding-left: 20px;
      }
      input {
         width: 17px;
         height: 17px;
         vertical-align: bottom;
         position: relative;
         top: -1px;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <br>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Nach dem Login kopieren

Fazit

Webformulare sind ein grundlegender Bestandteil der Webentwicklung, die häufig verwendet wird. Um sie browserübergreifend kompatibel zu machen, sollten wir sicherstellen, dass die Ausrichtung der Eingabe- und Beschriftungselemente korrekt ist. Dadurch sieht Ihre Website auf allen Browsern und Geräten konsistent und professionell aus .

Das obige ist der detaillierte Inhalt vonWie richtet man ein Kontrollkästchen und seine Beschriftung mithilfe von CSS in verschiedenen Browsern aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!