HTML中当一个元素为块级元素时，变为行内元素的方法在它的选择器中添加:display:inline;，而行内元素变换为块级元素：display:block;
行内元素定义它的height和width时没效果，而变换为块级时就可以定义它的height和width
而当它为块级元素时会独占整个定义的空间，即使整行有空余下一个元素也要换行，这时只需在选择器中添加float:left或right即可;这时再添加就会紧接着它放元素(如果还有空间)，这时就需要在要换行的元素选择器中添加clear:both;因为一旦元素浮动(float)就不属于块级了，
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=gbk" />
5 <title></title>
6 <style type="text/css">
7 body{
8 margin:0px;
9 }
10 .div{
11 margin:opx;;
12 width:960px;
13 height:400px;
14 margin:auto;
15 border:1px red solid;
16 }
17 .div #left{
18 background-color:#aa4411;
19 display:block;
20 border:blue solid 1px;
21 width:100px;
22 height:100px;
23 float:left;
24 text-decoration:none;
25 line-height:100px;
26 }
27 .div #right{
28 background-color:#666;
29 display:block;
30 width:100px;
31 height:100px;
32 border:green solid 1px;
33 text-decoration:none;
34 float:left;
35 }
36 .div #lin{
37 width:50px;
38 height:50px;
39 display:block;
40 text-decoration:none;
41 clear:both;
42 border:1px red dashed;
43 }
44 a:hover{
45 color:green;
46 }
47 .link{
48 text-decoration:none;
49 }
50 </style>
51 </head>
52 <body>
53 <div
class="div">
54 <a href="" id="left">left</a>
55 <a href="" id="right">right</a>
56 <a href="" id="lin">link</a>
57 </div>
58 </body>
59 </html>
posted on 2011-11-29 10:14
魏文甫 阅读(183)
评论(0) 编辑 收藏