Checkboxen in zwei Spalten anordnen

Tiyen

Hi,

hab ein kleines Problem und zwar habe ich sechs Checkboxen die ich wie im folgenden Bild anordnen muss(also in zwei Spalten)

Ich habe etliches versucht komme aber einfach nicht auf die Lösung...
Ich dachte mir mit float könnte man dafür sorgen, dass sich die Elemente richtig anorden aber Pustekuchen

Vllt könnt ihr mir auf die Sprünge helfen.

Code

[COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check1"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Horror[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check1" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"horror"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>
[/COLOR][COLOR=#e1efff]
[/COLOR][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check2"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Psycho[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check2" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"psycho"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>
[/COLOR][COLOR=#e1efff]
[/COLOR][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check3"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Krimi[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check3" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"krimi"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>
[/COLOR][COLOR=#e1efff]
[/COLOR][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check4"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Doku[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check4" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"doku"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>
[/COLOR][COLOR=#e1efff]
[/COLOR][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check5"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Komödie[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check5" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"komödie"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>
[/COLOR][COLOR=#e1efff]
[/COLOR][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]label [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"boxdescr" [/B][/COLOR][COLOR=#ffdd00]for=[/COLOR][COLOR=#3ad900][B]"check6"[/B][/COLOR][COLOR=#e1efff]>[/COLOR][B]Romanze[/B][COLOR=#e1efff]<[/COLOR][COLOR=#9effff]input [/COLOR][COLOR=#ffdd00]class=[/COLOR][COLOR=#3ad900][B]"box" [/B][/COLOR][COLOR=#ffdd00]id=[/COLOR][COLOR=#3ad900][B]"check6" [/B][/COLOR][COLOR=#ffdd00]type=[/COLOR][COLOR=#3ad900][B]"checkbox" [/B][/COLOR][COLOR=#ffdd00]name=[/COLOR][COLOR=#3ad900][B]"romanze"[/B][/COLOR][COLOR=#e1efff]></[/COLOR][COLOR=#9effff]label[/COLOR][COLOR=#e1efff]>[/COLOR]

Alles anzeigen

MrMurphy

Hallo,

grundsätzlich solltest du erst mal deinen HTML-Quelltext ändern. Also label und input nicht verschachteln. Danach die input vor die label setzen, so wie sie auch erscheinen sollen. Zum Schluß das ganze noch in ein form-Element packen: Das sieht dann so aus:

Code

<form id="formular" action="#" method="post">


      <input class="box" id="check1" type="checkbox" name="horror">
      <label class="boxdescr" for="check1">Horror</label>


      <input class="box" id="check2" type="checkbox" name="psycho">
      <label class="boxdescr" for="check2">Psycho</label>


      <input class="box" id="check3" type="checkbox" name="krimi">
      <label class="boxdescr" for="check3">Krimi</label>


      <input class="box" id="check4" type="checkbox" name="doku">
      <label class="boxdescr" for="check4">Doku</label>


      <input class="box" id="check5" type="checkbox" name="komödie">
      <label class="boxdescr" for="check5">Komödie</label>


      <input class="box" id="check6" type="checkbox" name="romanze">
      <label class="boxdescr" for="check6">Romanze</label>


   </form>

Alles anzeigen

Aktuell bietet sich zur Anordnung dann das Flexbox-Modell an, das CSS könnte dann so aussehen:

Code

* {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
html {
   font-size: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
body {
   padding: 0;
}
input,
select {
   font-size: 1rem;
   padding: 0;
   margin: 0;
}
form {
   width: 50%;
   padding: 0;
   margin: 0;
   display: block;
   display: flex;
   flex-wrap: wrap;
}
input {
   width: 4%;
}
label {
   width: 45%;
}

Alles anzeigen

Die Werte sind natürlich nur Vorschläge, die müsstest du dann noch deinen Erfordernissen anpassen.

Wenn du den HTML-Quelltext wie vorgeschlagen geändert hast kannst du natürlich auch auf float zurückgreifen, dabei wie immer das clear nicht vergessen.

Gruss

MrMurphy

Checkboxen in zwei Spalten anordnen

Tags

Benutzer online in diesem Thema