|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <style> |
|
9 div.button { |
|
10 display: inline-block; |
|
11 border: 0; |
|
12 padding: 0; |
|
13 |
|
14 font: 10px sans-serif; |
|
15 text-align: center; |
|
16 vertical-align: top; |
|
17 |
|
18 color: black; |
|
19 background: gray; |
|
20 } |
|
21 |
|
22 div.p80 { |
|
23 width: 80%; |
|
24 background: pink; |
|
25 } |
|
26 |
|
27 div.p100 { |
|
28 width: 100%; |
|
29 background: yellow; |
|
30 } |
|
31 </style> |
|
32 </head> |
|
33 <body> |
|
34 <!--Button has explicit width for us to resolve against: --> |
|
35 <div class="button" style="width: 100px"> |
|
36 <div class="p80">abc</div> |
|
37 </div> |
|
38 |
|
39 <div class="button" style="width: 100px"> |
|
40 <div class="p100">abc</div> |
|
41 </div> |
|
42 |
|
43 <!--Button is using intrinsic width: --> |
|
44 <div class="button"> |
|
45 <div class="p80">abc</div> |
|
46 </div> |
|
47 |
|
48 <div class="button"> |
|
49 <div class="p100">abc</div> |
|
50 </div> |
|
51 |
|
52 </body> |
|
53 </html> |