Autor Zpráva
MilanJ
Profil
V buňce tabulky mám mám 9 checkboxů, každý z nich má i popis.
Chtěl bych, aby se zobrazovali vždy 3 checkboxy na řádku, tj. 3 řádky po 3 checkboxech, vždy ve stejné vzdálenosti od sebe.
Ano, řeším je tabulka 3x3 a každý checkbox bude mít svou buňku, ale chci řešení bez vnořené tabulky.

Napadlo mě tedy, že vytvořím DIV s pevnou šířkou 150px a po 3 DIVech odřádkuju <br />. To ale moc nefunguje, viz níže.

Poradí někdo jak na to?



<style type="text/css">
<!--
.region {
vertical-align: middle;
width: auto;
background-color: #CCFFFF;
padding-bottom: 3px;
padding-top: 3px;
}
-->
</style>
</head>

<body>


<div class="region"><input name="regionCr" type="checkbox" id="idRegionCr" value="Cel&aacute; ČR" /><label>Celá ČR</label></div>
<div class="region"><input name="regionKarvina" type="checkbox" id="idRegionKarvina" value="Karviná" /><label>Karviná</label></div>
<div class="region"><input name="regionKrnov" type="checkbox" id="idRegionKrnov" value="Krnov" /><label>Krnov</label></div>
<br />
<div class="region"><input name="region_cr" type="checkbox" id="idRegion_cr" value="Cel&aacute; ČR" /><label>Celá ČR</label></div>
<div class="region"><input name="region_cr" type="checkbox" id="idRegion_cr" value="Cel&aacute; ČR" /><label>Celá ČR</label></div>
<div class="region"><input name="region_cr" type="checkbox" id="idRegion_cr" value="Cel&aacute; ČR" /><label>Celá ČR</label></div>

</body>
Plaváček
Profil
MilanJ

DIV je prvek blokový, takže bez použití pozicování ho vedle napozicuješ velmi těžko. Šlo by to krkolomně řešit pomocí floatování, ale to ti přidělá víc starostí než užitku. Použij tabulku, tím vůbec nic nezkazíš.
MilanJ
Profil
Nejde použít místo DIVu SPAN?
Plaváček
Profil
MilanJ

Lze, ale SPAN je inline prvek a takovému nenastavíš šířku. Jinak řečeno - nebude splněná podmínka, že všechny tři části s checkboxy budou stejně široké. Proč se bráníš tabulce? Na tohle je jako stvořená a přístupnost ani sémantiku tím nijak nenarušíš.
habendorf
Profil
Na druhou stranu i pure CSS je samozřejmě možné. Žádný div, žádný span, prostě nafloatovat input i label (se zadanou šířkou) a po třech vyclearovat. Takže zas taková krkolomnost to není.

Ale netvrdím že tabulka je špatné řešení.
Toto téma je uzamčeno. Odpověď nelze zaslat.