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
魏文甫 閱讀(196)
評論(0) 編輯 收藏