inline-block-list-marker-ref.html (1447B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>CSS Reference: inline flow-root list-item with ::marker</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; 13 } 14 ol,ul,li { margin:0; padding:0; } 15 body { margin-left: 40px; } 16 17 li { border: 1px solid; display: list-item; } 18 li::marker { content: counters(list-item, ".") " "; } 19 20 .wrap { width: 22ch; } 21 .m { width: fit-content; } 22 ib { display:inline-block; } 23 </style> 24 </head> 25 <body> 26 27 <div class="wrap"> 28 <li>A A A A A A A A A A A A A A A A A A A A </li> 29 <li class=m>B</li> 30 31 <ol> 32 <li>A A A A A A A A A A A A A A A A A A A A </li> 33 <ib><li class=m>B</li></ib> 34 <ib><li class=m>C</li></ib> 35 </ol> 36 37 <ol style="display:inline"> 38 <ib><li>A A A A A A A A A A A A A A A A A A A A </li></ib> 39 <ib><li class=m>B</li></ib> 40 <ib><li class=m>C</li></ib> 41 </ol> 42 43 <ol style="display:inline"> 44 <li>A A A A A A A A A A A A A A A A A A A A </li> 45 <li>B<ol> 46 <li>a a a a a a a a a a a a a a a a a a a a </li> 47 <li class=m>b</li> 48 </ol></li> 49 <li class=m>C</li> 50 </ol> 51 52 <ul> 53 <li>A A A A A A A A A A A A A A A A A A A A </li> 54 <li>B<ol style="display:inline"> 55 <li>a a a a a a a a a a a a a a a a a a a a </li> 56 <li class=m>b</li> 57 </ol></li> 58 <li class=m>C</li> 59 </ul> 60 </div> 61 62 </body>