Entfernen Sie das Leerzeichen zwischen den Kontrollkästchen

Question

Ich habe ein Formular, das mehrere Kontrollkästchen enthält, die vertikal in einem Div ausgerichtet sind. Ich möchte den Abstand zwischen den einzelnen Kontrollkästchen entfernen. Aber ich kann keine Lösungen finden.

<div style="height:100px;width:25px;float:left;">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Hat jemand eine Lösung für dieses Problem?

Answer 1

Ich habe die Lösung gefunden:

  <input type="checkbox" style="margin: 0; padding 0;  height:13px"/>

Beim IE müssen Sie die Höhe einstellen, um den Abstand zwischen den Kontrollkästchen zu entfernen.

Answer 2

Nach einem Gespräch mit Paul O'B, einem CSS-Guru, ist dies eine gute Lösung, die in IE 6, 7, 8, FF 3 und Chrome funktioniert:

<style type="text/css">     
    #aDiv input {
        margin: 0;
        padding: 0;
        display:block;
        height:12px;
        overflow:hidden
    }
</style>

<div id="aDiv" style="width:25px">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

Hier wird ein Doctype von HTML 4.01 strict verwendet. Wenn Sie nebeneinander liegende Rahmen für die Kontrollkästchen wünschen, verwenden Sie eine Höhe von 13px.

Der Attributselektor funktioniert nicht im IE 6, daher wird er hier herausgenommen. Wenn Sie ein anderes Eingabeelement hinzufügen müssen, das kein Kontrollkästchen ist, verwenden Sie stattdessen class.

Answer 3

Wahrscheinlich Zeilenumbrüche zwischen <input> Tags werden wie alle anderen Leerzeichen interpretiert, deshalb sehen Sie Leerzeichen zwischen ihnen. Ich denke, die CSS-Regeln haben nichts damit zu tun.

---

Editar: Weitere Nachforschungen haben ergeben, dass sich Leerzeichen nur auf horizontale Lücken auswirken würden. Was den vertikalen Abstand betrifft, so ist es meines Erachtens unmöglich, sicherzustellen, dass die Kontrollkästchen zusammenhalten, ohne benutzerdefinierte Grafiken zu verwenden - Webbrowser sind nicht verpflichtet, sie standardmäßig perfekt quadratisch zu machen, und selbst wenn Sie einen Weg finden, ihre Begrenzungsrahmen einander berühren zu lassen, könnte der Effekt nicht zufriedenstellend sein.

Um ihre Bounding Boxes so eng wie möglich zu machen, setzen Sie line-height Attribut für div Element. Mit Original-Sprites sieht es in keinem Browser, den ich getestet habe, so aus, wie Sie es wollten.

Verwendung einer benutzerdefinierten Grafik mit einer bestimmten Höhe und identischer line-height sollte das genügen.

---

Eine weitere Bearbeitung: Einige Leute haben hier vorgeschlagen, eine feste Höhe des Eingabeelements von 13px . Erinnern Sie sich! Es ist falsch . Sie können sich nicht darauf verlassen, dass einige Browser ein Checkbox-Sprite mit dieser Höhe eingebaut haben.

Answer 4

Zwischen den einzelnen Kontrollkästchen befindet sich Leerraum. Die einzige Möglichkeit, ihn zu entfernen, ist float sie:

<style type="text/css">
    .myCheckBoxDiv > input[type="checkbox"]
    {
        float: left;
    }
    .myCheckBoxDiv:after
    {
        clear: both;
        content: "";
        display: block;
    }
</style>

<div class="myCheckBoxDiv">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Answer 5

Einfach einstellen:

<input type="checkbox" style="margin: 0">

Aber es funktioniert nicht im IE.

Ich denke, dass die verschiedenen Browser die HTML-Elemente unterschiedlich darstellen. Daher ist es schwierig, einen vollständigen Überblick über die Situation zu bekommen.

Ich habe jedoch eine Lösung gefunden, aber dieses Mal müssen wir einen Trick auf das Body-Element anwenden.

Das CSS wird folgendermaßen aussehen:

<style type="text/css">
    input.mycheckbox {
        height: 13px;
        width: 13px
    }

    body {
        font-size: 40%;
    }
</style>

Und der Inhalt innerhalb des body-Tags ist:

Ich hoffe, das hilft.