• 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:

    • aaaa
    • bbbb
    • cccc
    • dddd

    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>

    • aaaa
    • bbbb
    • cccc
    • dddd
    • eeee
    • fffff
    • gggg
    • hhhh

    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>

    aaaa
    bbbb
    cccc
    dddd

    eeee
    fffff
    gggg
    hhhh

    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:

    • aaaa
    • bbbb
    • cccc
    • dddd
    • eeee
    • ffff
    • gggg
    • hhhh

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