liste

Bricolant sur les sommaires, je tombe sur un code que je ne comprends pas alors, en espérant la visite d'un ou d'une plus futé(e) que moi, je pose ici la question:

Si je fais une liste dans un cadre du genre:

<div style="width:20vw; height:10vw; border:0.1vh solid black;"><ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul></div>

le résultat donne ça:

Si je veux placer 2 listes dans ce cadre, l'une à côté de l'autre, j'écris: 

<div style="width:20vw; height:10vw; border:0.1vh solid black;"><p style="float:left; width:7vw; height:9vw; border:0.1vh solid red;"><ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul></p><p style="float:left; width:7vw; height:9vw; border:0.1vh solid blue;"><ul><li>eeee</li><li>fffff</li><li>gggg</li><li>hhhh</li></ul></p></div>

Les paragraphes et leurs attributs sont effacés de l'éditeur html !

Par contre, sans utiliser de liste, j'obtiens ce que je souhaite, en écrivant:

<div style="width:20vw; height:10vw; border:0.1vh solid black;"><p style="float:left; width:7vw; height:9vw; border:0.1vh solid red;">aaaa<br/>bbbb<br/>cccc<br/>dddd<br/></p><p style="float:left; width:7vw; height:9vw; border:0.1vh solid blue;">eeee<br/>fffff<br/>gggg<br/>hhhh<br/></p></div>

Les listes n'accepteraient-elles pas d'être placées dans un "sous-cadre" ?

Pourtant, on peut les écrire dans les cellules d'un tableau sans souci ... mais pas dans un paragraphe aux caractéristiques d'une cellule de tableau par : display:table-cell;

En rédigeant cette page, j'imagine un code à essayer:

<div style="width:20vw; height:10vw; border:0.1vh solid black;"><ul style="float:left; width:7vw; height:9vw; border:0.1vh solid red;"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul><ul style="float:left; width:7vw; height:9vw; border:0.1vh solid blue;"><li>eeee</li><li>ffff</li><li>gggg</li><li>hhhh</li></ul></div>

et ça donne:

Si mes réflexions peuvent servir à d'autres ...