éléments de mise en forme des colonnes et des lignes

Pour éviter de réinventer la roue, je suis la génération d'un formulaire en utilisant l'assistant formulaire de CakePHP, qui créent le balisage suivant:éléments de mise en forme des colonnes et des lignes

<div class="input select"><label for="ReportFruit">Fruit</label> 
     <input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" /> 

<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label> 
... 
</div> 
</div>

qui génère un tas de cases à cocher dans ce format:

[] Banana 
[] Apple 
[] Pear 
[] ...

Je voudrais les formater afin qu'ils affichent comme ceci: (idéalement, je serais encore en mesure de définir le nombre d'options par ligne, mais sinon il est bien aussi)

[] Banana [] Apple  [] Pear 
[] Mango  [] Lemon  [] ...

Est-ce que je peux accomplir cela en utilisant seulement CSS ou devrais-je manipuler le DOM using JS (ou changer le balisage avec PHP avant que je le produise)?

Source

2010-08-02 NullUserException

Vous pouvez utiliser le CSS suivant:

div.checkbox { float: left; width: 31%; margin-right: 1% }

(1% est pour les problèmes d'arrondi, diminuer la largeur et augmenter margin-right comme bon vous semble, vous pouvez également utiliser des valeurs de pixels bien sûr.)

Cela distribuera les cases à cocher et leurs étiquettes sur trois colonnes. Cependant, avec de longues étiquettes qui recouvrent plusieurs lignes, vous pouvez rencontrer des problèmes de distribution (essayez-le pour voir ce que je veux dire).

Pour éviter cela, donner tous les 3 colonne la classe supplémentaire newline:

<div class="checkbox newline">

et définissent en CSS:

div.checkbox.newline { clear: left }

Source

2010-08-02 20:07:03

Fonctionne bien; a dû changer de CSS ailleurs mais les formulaires ont toujours l'air OK – NullUserException

merci pour le conseil newline, m'a sauvé quelques maux de tête – Mercurybullet

La propriété nombre de colonnes en CSS est assez utile. Si vous mettez un saut de ligne après chaque élément de formulaire, vous pouvez faire une présentation assez propre. En outre, en ajoutant <span style="white-space: nowrap;">, il conserve l'étiquette attachée à l'élément de case à cocher

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.newspaper { 
    -webkit-column-count: 6; /* Chrome, Safari, Opera */ 
    -moz-column-count: 6; /* Firefox */ 
    column-count: 6; 
} 
</style> 
</head> 
<body> 

<p>Here are a bunch of check boxes and their labels laid out nicely 
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> 

<div class="newspaper"> 

<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> 
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> 

</div> 

</body> 
</html>

Source

2016-05-16 01:01:07 CAtoOH

éléments de mise en forme des colonnes et des lignes

Répondre

Questions connexes