display-flow-root-list-item-001-ref.html (1273B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: display:flow-root list-item</title> 9 <link rel="author" title="Mats Palmgren" href=""> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 13 } 14 15 body { padding-left: 100px; } 16 17 .float { 18 float: left; 19 width: 20px; 20 height: 40px; 21 background: pink; 22 } 23 24 .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} 25 26 </style> 27 </head> 28 <body> 29 30 <div style="border:1px solid"> 31 <div style="margin: 40px 0"> 32 <div style="display:list-item"><div>x</div></div> 33 </div> 34 </div> 35 36 <div style="border:1px solid"> 37 <div style="display:list-item" class="float"></div> 38 <div class="clearfix"></div> 39 </div> 40 41 <div style="border:1px solid"> 42 <div class="float"></div> 43 <div style="display:list-item; border:1px solid; margin-left:20px">x</div> 44 </div> 45 46 <span> 47 <div style="display:flow-root; margin-top:20px"><span style="display:list-item; background:grey"><div style="padding:20px">x</div></span></div> 48 </span> 49 50 <div style="display:list-item; border:3px solid; height:10px;"></div> 51 52 </body> 53 </html>