请教一个float不起作用的问题

yushoubin 2012-03-17 12:23:22

CSS代码是这样的
#mainbody{
width:auto;
height:800px;
margin:5px 0;
border:none;
font-size:12px;
}
#mainbody dl{
padding:0;
width:152px;
height:93px;
margin:20px 8px 10px 30px;
float:left;
}
#mainbody dl dt {
float:left;
width:152px;
height:93px;
}
#mainbody dl dt a{
display:block;
}

html代码是这样的
<div id="mainbody">
<dl>

<dt>
<a href="http://www.baidu.com/" target="_blank" >
<img src="./weblogos/baidu.com.png" alt="www" />
</a>
</dt>
<dd>www</dd>
<dt>
<a href="http://www.baidu.com/" target="_blank" >
<img src="./weblogos/baidu.com.png" alt="www" />
</a>
</dt>
<dd>www</dd>
<dt>
<a href="http://www.baidu.com/" target="_blank" >
<img src="./weblogos/baidu.com.png" alt="www" />
</a>
</dt>
<dd>www</dd>
</dl>
</div>
出现的结果是竖着排一排，为什么，我希望是横着排

...全文

396 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

MuBeiBei 2012-03-17

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#mainbody{



height:800px;

margin:5px 0;

border:none;

font-size:12px;

}

#mainbody dl{

padding:0;



height:93px;

margin:20px 8px 10px 30px;

float:left;

display:inline;

}

#mainbody dl dt {

float:left;

width:152px;

height:93px;

}

#mainbody dl dd{

	float:left;	

}

#mainbody dl dt a{

display:block;

}

</style>

</head>



<body>

<div id="mainbody">

<dl>



<dt>

<a href="http://www.baidu.com/" target="_blank" >

<img src="./weblogos/baidu.com.png" alt="www" />

</a>

</dt>

<dd>www</dd>

<dt>

<a href="http://www.baidu.com/" target="_blank" >

<img src="./weblogos/baidu.com.png" alt="www" />

</a>

</dt>

<dd>www</dd>

<dt>

<a href="http://www.baidu.com/" target="_blank" >

<img src="./weblogos/baidu.com.png" alt="www" />

</a>

</dt>

<dd>www</dd>

</dl>

</div>

</body>

</html>