éléments de liste en ligne, sans float:left

Bonjour,

Je cherche à aligner des blocs carrés (balise li) en ligne, sans utiliser de float.

J'utilise Mootools pour réaliser des blocs que l'on peut trier en les déplaçant (drag and drop). Tout marche bien, mais cela implique quelques contraintes :

- Il faut impérativement utiliser des listes ul
- Du fait de l'utilisation du drag and drop, je ne peux pas utiliser :

ul#collections li
    {
        float:left;
    }

Sinon, voilà le résultat : voir

Mon code xhtml :

<li>
                           <form>
                                <h4><input type="checkbox" checked="checked" name="orderCollect[]" value="1" class="masquer" />Printemps</h4>
                                <div>
                                    <input type="button" name="modifier" value="Modifier" /><br />
                                    <input type="button" name="suppr" value="Supprimer" /><br />
                                    <input type="checkbox" name="publier" value="1" checked="checked" /> Publier cette collection<br />
                                    <p><a href="" title="Voir tous les produits de cette collection">Voir produits</a></p>

                                </div>
                            </form>
                        </li>   

Modifié par MademoiselleL (10 Jan 2008 - 18:06)

tu peux utiliser la propriété

display:inline

mais la encore faut verifier si elle est compatible avec ton script

En fait, c'est compatible avec le script, mais le problème, c'est que j'ai des éléments en blocks dans les li :

<li>
<form>
   <h4><input type="checkbox" checked="checked" name="orderCollect[]" value="1" class="masquer" />Printemps</h4>
   <div>
       <input type="button" name="modifier" value="Modifier" /><br />
       <input type="button" name="suppr" value="Supprimer" /><br />
       <input type="checkbox" name="publier" value="1" checked="checked" /> Publier cette collection<br />
       <p><a href="" title="Voir tous les produits de cette collection">Voir produits</a></p>

</div>
</form></li>

Du coup, c'est comme si je n'avais rien fait...

On peut essayer display: inline-block avec les navigateurs compatibles, mais je ne suis pas sûr que ça change grand chose au problème (et puis ça n'est pas vraiment utilisable en production).

Il faudrait surtout savoir quel est l'action exacte exercée par le script sur les propriétés CSS des li.
Modifié par Florent V. (10 Jan 2008 - 22:28)

Merci de vos réponses

mais ces méthodes ne fonctionnent pas (même affichage que s'il n'y avait rien :

display:inline;
display:inline-block;

Par contre, je viens de voir que je peux tout à fait utiliser d'autres éléments que ul. Je ne suis pas sûre que ça aide beaucoup.

Pour ce qui est de Mootools et ce qu'il fait sur les éléments, je crois qu'il utilise

position:absolute;

MademoiselleL a écrit :
mais ces méthodes ne fonctionnent pas (même affichage que s'il n'y avait rien :

display:inline;
display:inline-block;

Tu as testé en supprimant le float?
De plus:
- le display: inline ne marchera pas (les enfants du li sont des éléments de type bloc);
- il se peut que le display: inline-block fonctionne, mais uniquement avec les navigateurs qui l'implémentent (pas Firefox 2 ou Internet Explorer 6-7, donc).

MademoiselleL a écrit :
Pour ce qui est de Mootools et ce qu'il fait sur les éléments, je crois qu'il utilise

position:absolute;

Il faudrait en être sûr, et savoir très exactement ce qui se passe.

C'est le problème des librairies, de leurs plugins et des scripts tout prêts: quand ça ne marche pas, on ne peut pas faire grand chose car on ignore comment ça marche exactement. Il faut alors s'adresser au forum ou à la liste de diffusion de support de la libraire, du plugin ou du script concerné.

bonjour/bonsoir

Le display:inline-block , n'est pas supporté par IE , ni Firefox , mais la piste est intéressante et des alternatives/complément sont possible pour ces 2 navigateurs.

Pour rappel , (souvent proposé dans un contexte alternative a display:table + alignement vertical) , le display:inline; conjoint a un zoom:1; dans IE , permet de retrouvé un comportement similaire au display:inline-block sur un élément de type block .
en cc :

<!--[ if IE]><style>
li {
 zoom:1;
 display: inline;
}
</style><![ endif]-->

(sans espace aprés le crochet)

Dans mozilla , un e autre règle propriétaire reprend le display:inline-block de cette façon :

li {
display:-moz-inline-box;
}

Pas de commentaire conditionnels pour Firefox .

Cependant , celui-ci , prendra en compte cette valeur sur le display , si la suivante est incomprise.

On peut donc ecrire sans gros risques (si ce n'est d'en oublier son utilité ou mise a jour quelques semaines aprés avoir edité les styles , un commentaire /* explication de la regele */ dans le css peut avoir son utilité) :

li {
display:-moz-inline-box;/* pour Firefox , Voir CC pour IE !*/
display:inline-block;
}

Le jour ou la regle display:inline-block est implémenté par Firefox , il n'y aura rien a faire ,quand au display + zoom pour IE , peut-être faudra t-il modifié la condition : if IE en if lte IE 7 si IE8 implémente enfin le display:inline-block correctement aussi sur les éléments block sans joué sur le 'haslayout'.

tu peut eventuellement tester ton code avec un css de ce genre:

<style type='text/css'>
li {
border:1px solid ;
display:-moz-inline-box;
display:inline-block;
min-height:200px;
min-width:200px;
height:auto!important;
width:auto!important;
vertical-align:top;
margin:0.5em;
} 
</style>
<!--[ if IE]>
<style>
li {
 zoom:1;
 display: inline;
height:200px;
width:200px;
}
</style>
<![ endif]-->

tes li devrait alors être dimensionnables , extensibles et se comportées comme des block en ligne dans au moins IE , FF et les navigateurs implémentant correctement le display:inline-block (opera , safari , ...).
<edit>oublie de ma part => code css mis a jour pour rendre effectivement extensible les elements de liste quelque soit le navigateur (min-width et min-height) ,
noter , que les version inferieur a IE5.5 devrait etre aussi en mesure de réagir correctement ... enfin c'est pour l'anecdote </>

Ensuite quelques difference peuvent apparaitrent selon l'indentation du code d'un navigateur a l'autre . Un espace peut-etre inserer (ou non) entre les elements de liste .

GC

P.S. Si ta difficulté provient du fait que tu ne sais pas adapter le script a une autre balise que li , peut-etre vaut-il mieux rechercher une aide de ce coté , plutôt que css ?
Modifié par gcyrillus (11 Jan 2008 - 23:03)