| 发表于：2007-09-13 17:29:41 楼主 |
ff和opera下显示正常
但ie下左边会多空出来一部分
空的部分宽度好像是li设置的margin值得两倍。。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en " "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "content-type " content= "text/html; charset=utf-8 " />
<title> test </title>
<style type= "text/css ">
/*** the essential code ***/
* {
font-size:12px; font-family:arial, '宋体 ', sans-serif
}
body {
margin:0;padding:0;
min-width: 630px;
}
div, p, input {
margin:0;padding:0;
}
.clear{
clear:both;
}
.comments{
width:500px;
}
.comments .list ul{
width:100%;
margin:0;
padding:0;
overflow:hidden;
}
.comments .list ul li{
list-style:none;
}
.comments .row ul{
}
.comments .row ul li{
float:left;
width:100px;
margin:0 0 5px 80px;
padding:5px;
}
.comments .row ul li .box{
position:relative;
}
.comments .logo{
background:#aaa;
position:absolute;
left:-70px;
width:60px;
height:60px;
}
.contents p{
font-style:italic;
font-weight:700;
}
</style>
</head>
<body>
<div class= "comments ">
<div class= "row list ">
<ul>
<li> <div class= "listlitop "> </div> <div class= "box ">
<div class= "logo "> logo </div>
<big> author </big>
<small> title </small>
<span class= "contents "> <p> contents <br /> 123 </p> </span>
</div> </li>
<li> <div class= "listlitop "> </div> <div class= "box ">
<div class= "logo "> logo </div>
<big> author </big>
<small> title </small>
<span class= "contents "> <p> contents <br /> 123 </p> </span>
</div> </li>
<li> <div class= "listlitop "> </div> <div class= "box ">
<div class= "logo "> logo </div>
<big> author </big>
<small> title </small>
<span class= "contents "> <p> contents <br /> 123 </p> </span>
</div> </li>
<li> <div class= "listlitop "> </div> <div class= "box ">
<div class= "logo "> logo </div>
<big> author </big>
<small> title </small>
<span class= "contents "> <p> contents <br /> 123 </p> </span>
</div> </li>
<li> <div class= "listlitop "> </div> <div class= "box ">
<div class= "logo "> logo </div>
<big> author </big>
<small> title </small>
<span class= "contents "> <p> contents <br /> 123 </p> </span>
</div> </li>
</ul>
</div>
</div>
<div style= "clear:both "> </div>
</body>
</html> |
|
|
|
|
