浏览 2056 次
|
锁定老贴子 主题：CSS 制作表格的问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2007-07-03 关键字: table ul li css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
html,body{
margin:0 auto;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
width:760px;
}
table{
margin:50px auto;
width:505px;
}
ul{
list-style:none;
}
li{
display:inline;
width:100px;
height:20px;
text-align:center;
margin-left:1px;
margin-bottom:1px;
}
.tableHeader li{
background:#444;
color:#fff;
}
.odd li{
background:#ccc;
}
.even li{
background:#aaa;
}
</style>
</HEAD>
<BODY>
<div id="table">
<ul class="tableHeader">
<li>bookName</li>
<li>author</li>
<li>publisher</li>
<li>price</li>
<li>description</li>
</ul>
<ul class="odd">
<li>book1</li>
<li>fennsky</li>
<li>jiangsu</li>
<li>$5.25</li>
<li>description</li>
</ul>
<ul class="even">
<li>book2</li>
<li>jack</li>
<li>yangzhou</li>
<li>$9.25</li>
<li>haokan</li>
</ul>
<ul class="odd">
<li>book3</li>
<li>lucy</li>
<li>nanjing</li>
<li>$13.3</li>
<li>deson</li>
</ul>
<ul class="even">
<li>book4</li>
<li>sherman</li>
<li>beijing</li>
<li>$51.25</li>
<li>ptiofdn</li>
</ul>
</div>
</BODY>
</HTML>
问题1：在IE7下显示没有问题，为什么在firefox下面width和height就不起做用呢？ 问题2：我将display:inline换成float:left；在firefox下width和height显示就没有问题，但到了IE7下就不行了呢（先不计较出现的其他问题） 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
时间：2007-07-03
样式方面，浏览器不同，是有这样的情况．
你可判断用户用的什么浏览器而用什么样的样式了． |
| 返回顶楼 | |
|
时间：2007-07-03
ul{
list-style:none;
clear:left;
}
li{
float:left;
width:100px;
height:20px;
text-align:center;
margin-left:1px;
margin-bottom:1px;
}
这样改一下，我没有装firefox，将li改成了原来的block显示方式，看看行不？ |
| 返回顶楼 | |
|
时间：2007-07-04
引用 问题2：我将display:inline换成float:left；在firefox下width和height显示就没有问题，但到了IE7下就不行了呢（先不计较出现的其他问题）
|
| 返回顶楼 | |
|
时间：2007-07-04
fennsky 写道 引用 问题2：我将display:inline换成float:left；在firefox下width和height显示就没有问题，但到了IE7下就不行了呢（先不计较出现的其他问题） 你想要什么效果？ |
| 返回顶楼 | |
|
时间：2007-07-05
问题已经解决了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
html,body{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
width:760px;
}
#table{
margin:50px auto ;
}
ul{
margin:0;
list-style:none;
width:505px;
}
li{
float:left;
width:100px;
height:20px;
text-align:center;
margin-left:1px;
margin-bottom:1px;
}
.tableHeader li{
background:#444;
color:#fff;
}
.odd li{
background:#ccc;
}
.even li{
background:#aaa;
}
</style>
</HEAD>
<BODY>
<div id="table">
<ul class="tableHeader">
<li>bookName</li>
<li>author</li>
<li>publisher</li>
<li>price</li>
<li>description</li>
</ul>
<ul class="odd">
<li>book1</li>
<li>fennsky</li>
<li>jiangsu</li>
<li>$5.25</li>
<li>description</li>
</ul>
<ul class="even">
<li>book2</li>
<li>jack</li>
<li>yangzhou</li>
<li>$9.25</li>
<li>haokan</li>
</ul>
<ul class="odd">
<li>book3</li>
<li>lucy</li>
<li>nanjing</li>
<li>$13.3</li>
<li>deson</li>
</ul>
<ul class="even">
<li>book4</li>
<li>sherman</li>
<li>beijing</li>
<li>$51.25</li>
<li>ptiofdn</li>
</ul>
</div>
</BODY>
</HTML>
|
| 返回顶楼 | |
