зеркало из https://github.com/mozilla/gecko-dev.git
77 строки
1.9 KiB
HTML
77 строки
1.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
|
|
<!-- http://www.bath.ac.uk/%7Epy8ieh/a/internet/projects/mozilla/widgets/ -->
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Mozilla Tests: Styled Widgets Eleven</title>
|
|
|
|
<style type="text/css">
|
|
|
|
div.right, div.left { width: 100px; height: 30px; background: green; color: white; }
|
|
div.left { float: left; } div.right { float: right; }
|
|
.center, p { display: block; margin: auto; width: 300px; }
|
|
p {border: 1px solid black; background: yellow; }
|
|
p.left { margin-left: 0; }
|
|
p.right { margin-right: 0; }
|
|
p.note {clear:both; width:auto; background: white;}
|
|
div { padding: 5px; border: solid; }
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<H1>Styling Widgets! 11</H1>
|
|
|
|
<p class=note>In all these tests, INPUT should act as a BLOCK element because it
|
|
is given 'display:block' in the stylesheet.</p>
|
|
|
|
<p class=note>In the following test case there a centered INPUT element.</p>
|
|
|
|
<div>
|
|
<P>I am centered with 'margin:auto'."</P>
|
|
</div>
|
|
|
|
<p class=note>In the following test case, there is the same INPUT but this time
|
|
it is next to a float. <em>The INPUT should be in the same place!</em></p>
|
|
|
|
<div>
|
|
<div class="right">I float.</div>
|
|
<P>I am centered with 'margin:auto'."</P>
|
|
</div>
|
|
|
|
<p class=note>This problem does not seem to occur with left floated images: </p>
|
|
|
|
<div>
|
|
<div class="left">I float.</div>
|
|
<P>I am centered with 'margin:auto'."</P>
|
|
</div>
|
|
|
|
<p class=note>Similarly, if we right align the INPUT, the INPUT does
|
|
not go under the floated block as it should:</p>
|
|
|
|
<div>
|
|
<div class="right">I float.</div>
|
|
<P class="right">I am right aligned with 'margin-left:auto'."</P>
|
|
</div>
|
|
|
|
<p class=note>In this case, though, the problem <em>does</em> appear for the left
|
|
case: </p>
|
|
|
|
<div>
|
|
<div class="left">I float.</div>
|
|
<P class="left">I am left aligned with 'margin-right:auto'."</P>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<p class=note><a href="10.html">Prev</a> <a href="12.html">Next</a></p>
|
|
|
|
</body>
|
|
|
|
</html>
|