Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
michael@0 | 1 | <!DOCTYPE html><html> |
michael@0 | 2 | <head><style> |
michael@0 | 3 | html,body { |
michael@0 | 4 | color:black; background-color:white; font-size:16px; padding:0; margin:0; |
michael@0 | 5 | } |
michael@0 | 6 | .test { |
michael@0 | 7 | overflow: hidden; |
michael@0 | 8 | text-overflow: ellipsis; |
michael@0 | 9 | width: 50px; |
michael@0 | 10 | margin-bottom:1em; |
michael@0 | 11 | height: 20px; |
michael@0 | 12 | white-space:nowrap; |
michael@0 | 13 | /*border:1px solid red;width: 500px;*/ |
michael@0 | 14 | } |
michael@0 | 15 | .rel { position:relative;} |
michael@0 | 16 | input,select,fieldset,textarea,hr,span { |
michael@0 | 17 | border:1px solid black; |
michael@0 | 18 | background: white; |
michael@0 | 19 | color: black; |
michael@0 | 20 | padding:0 40px; |
michael@0 | 21 | } |
michael@0 | 22 | iframe,img { width: 80px; height:10px; } |
michael@0 | 23 | select[size="4"],iframe,textarea,hr { height:10px; margin:0; } |
michael@0 | 24 | |
michael@0 | 25 | x {visibility:hidden;display:inline-block;margin-left:-10px;width:1000px;} |
michael@0 | 26 | </style></head> |
michael@0 | 27 | <body> |
michael@0 | 28 | |
michael@0 | 29 | <div style="position:absolute; top:0; left:0;"> |
michael@0 | 30 | <div class="test"><fieldset style="display:inline;"></fieldset></div> |
michael@0 | 31 | <div class="test"><fieldset style="display:inline-block;"></fieldset></div> |
michael@0 | 32 | <div class="test"><fieldset style="display:block;"></fieldset></div> |
michael@0 | 33 | |
michael@0 | 34 | <div class="test"><input type="button"></div> |
michael@0 | 35 | <div class="test"><input type="button" style="display:inline-block;"></div> |
michael@0 | 36 | <div class="test"><input type="button" style="display:list-item;"></div> |
michael@0 | 37 | <div class="test"><input type="button" style="display:block;"></div> |
michael@0 | 38 | |
michael@0 | 39 | <div class="test"><input type="text"></div> |
michael@0 | 40 | <div class="test"><input type="text" style="display:inline-block;"></div> |
michael@0 | 41 | <div class="test"><input type="text" style="display:block;"></div> |
michael@0 | 42 | |
michael@0 | 43 | <div class="test"><textarea></textarea></div> |
michael@0 | 44 | <div class="test"><textarea style="display:inline-block;"></textarea></div> |
michael@0 | 45 | <div class="test"><textarea style="display:block;"></textarea></div> |
michael@0 | 46 | |
michael@0 | 47 | <div class="test"><select size="1" style=""><option> <option> </select></div> |
michael@0 | 48 | <div class="test"><select size="1" style="display:block;"><option> <option> </select></div> |
michael@0 | 49 | |
michael@0 | 50 | <div class="test"><select size="4" style=""><option> <option> </select></div> |
michael@0 | 51 | <div class="test"><select size="4" style="display:block;"><option> <option> </select></div> |
michael@0 | 52 | </div> |
michael@0 | 53 | |
michael@0 | 54 | <div style="position:absolute; top:0; left:100px;"> |
michael@0 | 55 | <div class="test"><iframe src="about:blank" style=""></iframe></div> |
michael@0 | 56 | <div class="test"><iframe src="about:blank" style="display:block"></iframe></div> |
michael@0 | 57 | |
michael@0 | 58 | <div class="test"> <img src="../image/big.png"></div> |
michael@0 | 59 | <div class="test"> <img style="display:inline-block;" src="../image/big.png"></div> |
michael@0 | 60 | <div class="test"><img style="display:block;" src="../image/big.png"></div> |
michael@0 | 61 | |
michael@0 | 62 | <div class="test"><hr style="display:inline;background:lime;vertical-align:top;padding-top:100px;padding-bottom:100px; border-width:0"></div> |
michael@0 | 63 | <div class="test"><hr style="display:inline-block;vertical-align:top"></div> |
michael@0 | 64 | <div class="test"><hr style="display:block;"></div> |
michael@0 | 65 | |
michael@0 | 66 | <div class="test"><span style="border-width:0"></span></div> |
michael@0 | 67 | <div class="test"><span style="display:inline-block;"></span></div> |
michael@0 | 68 | <div class="test"><span style="display:inline-table;"></span></div> |
michael@0 | 69 | <div class="test"><span style="display:list-item;"></span></div> |
michael@0 | 70 | <div class="test"><span style="display:block;"></span></div> |
michael@0 | 71 | <div class="test rel">1<span style="position:relative;"></span></div> |
michael@0 | 72 | <div class="test rel">2<span style="position:absolute"></span></div> |
michael@0 | 73 | <div class="test rel">3<span style="position:absolute; left:60px"></span></div> |
michael@0 | 74 | <div class="test rel">4<x></x><span style="position:absolute;">abs4</span></div> |
michael@0 | 75 | <div class="test"><span style="float:left"></span></div> |
michael@0 | 76 | <div class="test"><span style="float:left; margin-left:-10px"></span></div> |
michael@0 | 77 | <div class="test"><span style="float:right; margin-right:-10px"></span></div> |
michael@0 | 78 | </div> |
michael@0 | 79 | |
michael@0 | 80 | </body></html> |