Aligner des éléments à gauche et à droite

Bonjour,

J'ai un tableau avec des li et ul et je souhaiterai que le $data['room'] soit coller à droite.
Ou faire deux tableur (à gauche avec le nom et prénom et deuxième avec le room.

Pouvez-vous m'aider svpl ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

{ if ( $c == 0 ) { echo '<div class="w3-container w3-cell w3-small" style="width:16.6%"><ul class="w3-ul ">'; echo '<li class="w3-padding-small w3-hover-blue w3-animate-zoom">'.$data['nom'].' '.$data['prenom'].'<b>'.$data['room'].'</b></li>'; }; if ( $c > 0 and $c < 24 ) { echo '<li class="w3-padding-small w3-hover-blue">'.$data['nom'].' '.$data['prenom'].'<b> '.$data['room'].' </b></li>'; }; if ( $c == 24 ) { echo '<li class="w3-padding-small"></li>'; echo '</ul></div>'; echo '<div class="w3-container w3-cell w3-small" style="width:16.6%"><ul class="w3-ul">'; echo '<li class="w3-padding-small w3-hover-blue">'.$data['nom'].' '.$data['prenom'].'<b> <w3-left-align>' .$data['room'].' </b></li>'; };

---

Bonjour,

le code PHP n'a aucun intérêt dans le forum CSS.

Il faut montrer le code CSS, et le code HTML associé (généré -> "Ctrl"+"U")

jreaux62 ,

Merci pour ta réponse, mais je ne vois pas se que je dois faire.

Bien à toi,

Sacha

Bonjour,

Citation:

---

mais je ne vois pas se que je dois faire

---

tout simplement fournir le code HTML généré.

Ceci dit je ne vois pas trop ce que tu espères obtenir dans un espace de 16.6%, style="width:16.6%", mais tu peux toujours essayer de mettre le CSS suivant :

Code:

---

1 2 3

.w3-ul li b { float: right; }

---

J'j'essaierai ceci tout à leur,

Je voudrai simplement, coller les numéros de chambre à droite. (voir faire deux tableau).

http://legrandsacha.ddns.net:9100/

à tester :

Code:

---

1 2 3 4

.w3-ul li { display: flex; justify-content: space-between; }

---

@sasch :
as-tu testé ce que je t'ai proposé, je pense que non !

@jreaux62 :
il ne faudrait pas retomber dans l’excès comme ce fût le cas avec les <table>s

@NoSmoking
1- le float: right; pose problème quand on réduit la fenêtre (car le <b> étant "hors flux" -> certains passent à la ligne/dans la case suivante)
On peut régler ce souci avec :

Code:

---

1 2 3 4 5 6

.w3-ul li { overflow: hidden; } .w3-ul li b { float: right; }

---

(mais on constate encore des "chevauchements" quand on réduit encore la fenêtre)

2- Quant à la solution avec flex : je n'ai pas dit que c'est la meilleure solution, ni la seule... mais ça fait la farce.

Attention je n'ai pas dit qu'il ne fallait pas l'utiliser mais que le mettre sur chaque <li> fait que l'on retombe dans le travers de la mauvaise utilisation des <table>.

Je me permet une remarque concernant le code de sasch, il serait bon qu'avant tout il soit conforme ce qui est loin d'être le cas, on se retrouve avec quelque chose comme :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<ul> <li><b></b></li> <div> <div> <header> <h2></h2> </header> <div> <p></p> <form> <p></p> <p><br></p> <div></div> </form> <p></p> </div> </div> </div> <li><b></b></li> <!-- la suite -->

---

ce qui purement n'importe quoi :aie:

La structure de base devrait être respectée :

Code:

---

1 2 3 4 5 6

<div class="ul-container"> <ul class="w3-ul"> <li><b></b></li> <li><b></b></li> </ul> </div>

---

C'est à partir d'une structure conforme que l'on met en place le CSS qui pourrait dans un premier temps être des plus trivial comme par exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.ul-container { margin: auto; max-width: 60em; } .w3-ul li { padding: 0 .5em; min-width: 19em; display: inline-block; } .w3-ul li b { float: right; }

---

cela ferait déjà le job plus simplement, aménagement possible à prévoir tout de même !

Ensuite si l'on veut quelque chose de plus simple à center on passe alors au modèle de boîte flexible mais sur le <ul> dans ce cas :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.ul-container { margin: auto; max-width: 60em; } .w3-ul { display: inline-flex; flex-wrap: wrap; max-width: 100%; /* si besoin IE */ } .w3-ul li { margin: auto; padding: 0 .5em; min-width: 19em; } .w3-ul li b { float: right; }

---

en fait pas grand chose de changé, aménagement possible à prévoir tout de même !

Comme au départ la présentation est faite sur trois colonnes il faudrait prévoir d'ajouter des <li> vides pour que le nombre de <li> soit un multiple de trois pour ne pas avoir de décalage sur la dernière ligne, et comme le code HTML est généré cela ne doit pas poser de problème.

Je pense que l'on pourrait , si l'on veut respecter l'ordre descendant des noms, passer par un modèle en colonne.

Un dernier point concernant tous les <form> inclus et mal inclus, je pense qu'il est préférable de gérer cela globalement via un formulaire unique et du JavaScript.