ul li实现表格的问题，有缺少两条线，帮忙看下代码改改

我看你有戏 2009-11-08 10:25:03

...全文

149 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

路伊阑珊 2009-11-09

打赏
举报

<!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>

    <title>css ul li表格 </title>

    <style type="text/css"> 

<!-- 

* { 

margin:0; 

padding:0; 

font-size:12px; 

color:#0000FF; 

} 

#biaoge { 

width:960px; 

margin:0px; 

padding:1px;

background:#008200; 

} 

#biaoge li { 

list-style-type:none; 

width:239; 

height:25px; 

line-height:23px; 

text-align:center; 

float:left;

margin:1px;

background:#E7F3E7; 

} 



--> 

</style>

</head>

<body>

    <div style="text-align: center; ">

        <ul id="biaoge">

            <li>数据1-1 </li>

            <li>数据1-2 </li>

            <li>数据1-3 </li>

            <li>数据1-4 </li>

            <li>数据2-1 </li>

            <li>数据2-2 </li>

            <li>数据2-3 </li>

            <li>数据2-4 </li>

            <li>数据3-1 </li>

            <li>数据3-2 </li>

            <li>数据3-3 </li>

            <li>数据3-4 </li>

            <li>数据4-1 </li>

            <li>数据4-2 </li>

            <li>数据4-3 </li>

            <li>数据4-4 </li>

        </ul>

    </div>

</body>

</html>

问题出在你设定的列高度上你都设定为25了你怎么显示颜色呢上左右都是1px 你实际的高度已经比25大所以下边框也就没有了

我在ul哪里设定了一个padding属性你看看关于padding的介绍吧关键问题还是在这里

yan11cn 2009-11-08

打赏
举报

<HTML> 

<HEAD> 

<title>css ul li表格 </title> 

<style type="text/css"> 

<!-- 

* { 

margin:0; 

padding:0; 

font-size:12px; 

color:#0000FF; 

} 

#biaoge { 

width:961px; 

height:105px;

margin:0px; 

background:#008200; 

} 

#biaoge li { 

list-style-type:none; 

width:239; 

height:25px; 

line-height:25px; 

text-align:center; 

float:left; 

margin-top:1px; 

margin-left:1px; 

/*margin-bottom:1px;*/ 

background:#E7F3E7; 

} 



--> 

</style> 



</HEAD> 

<body> 

<div align=center> 

<br> <br> 

<ul id="biaoge"> 

<li>数据1-1 </li> 

<li>数据1-2 </li> 

<li>数据1-3 </li> 

<li>数据1-4 </li> 

<li>数据2-1 </li> 

<li>数据2-2 </li> 

<li>数据2-3 </li> 

<li>数据2-4 </li> 

<li>数据3-1 </li> 

<li>数据3-2 </li> 

<li>数据3-3 </li> 

<li>数据3-4 </li> 

<li>数据4-1 </li> 

<li>数据4-2 </li> 

<li>数据4-3 </li> 

<li>数据4-4 </li> 

</ul> 

</div> 

</body> 

</HTML>

我看你有戏 2009-11-08

打赏
举报

要求是
<li>数据1-1 </li>
<li>数据1-2 </li>
<li>数据1-3 </li>
<li>数据1-4 </li>
<li>数据2-1 </li>
<li>数据2-2 </li>
<li>数据2-3 </li>
<li>数据2-4 </li>
<li>数据3-1 </li>
<li>数据3-2 </li>
<li>数据3-3 </li>
<li>数据3-4 </li>
<li>数据4-1 </li>
<li>数据4-2 </li>
<li>数据4-3 </li>
<li>数据4-4 </li>

要求这部分内容不能动，谢谢

yan11cn 2009-11-08

打赏
举报

class = "bottom" 那句可以去掉。。。忘记删了

yan11cn 2009-11-08

打赏
举报

#biaoge {
width:961px;
height:105px;
修改了这里



<HTML> 

<HEAD> 

<title>css ul li表格 </title> 

<style type="text/css"> 

<!-- 

* { 

margin:0; 

padding:0; 

font-size:12px; 

color:#0000FF; 

} 

#biaoge { 

width:961px; 

height:105px;

margin:1px 1px; 

background:#008200; 

} 

#biaoge li { 

list-style-type:none; 

width:239; 

height:25px; 

line-height:25px; 

text-align:center; 

float:left; 

margin-top:1px; 

margin-left:1px;

background:#E7F3E7; 

} 



--> 

</style> 



</HEAD> 

<body> 

<div align=center> 

<br> <br> 

<ul id="biaoge"> 

<li>数据1-1 </li> 

<li>数据1-2 </li> 

<li>数据1-3 </li> 

<li>数据1-4 </li> 

<li>数据2-1 </li> 

<li>数据2-2 </li> 

<li>数据2-3 </li> 

<li>数据2-4 </li> 

<li>数据3-1 </li> 

<li>数据3-2 </li> 

<li>数据3-3 </li> 

<li>数据3-4 </li> 

<li class = "bottom">数据4-1 </li> 

<li class = "bottom">数据4-2 </li> 

<li class = "bottom">数据4-3 </li> 

<li class = "bottom">数据4-4 </li> 

</ul> 

</div> 

</body> 

</HTML>

我看你有戏 2009-11-08

打赏
举报

楼上的我用ie8测试了你的代码，显示有问题的

bhbhxy 2009-11-08

打赏
举报

<!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>

<title>css ul li表格 </title>

<style type="text/css">

<!--

* {

margin:0;

padding:0;

font-size:12px;

color:#0000FF;

}

#biaoge {

width:960px;

margin:0px;

background:#008200;

}

ul{margin:0; padding:0}

#biaoge li {

list-style-type:none;

width:239;

height:25px;

line-height:25px;

text-align:center;

float:left;

margin-top:1px;

margin-left:1px;

display:inline;

/*margin-bottom:1px;*/

background:#E7F3E7;

}



-->

</style>



</HEAD>

<body>

<div id="biaoge" align=center>

<br> <br>

<ul>

<li>数据1-1 </li>

<li>数据1-2 </li>

<li>数据1-3 </li>

<li>数据1-4 </li>

<li>数据2-1 </li>

<li>数据2-2 </li>

<li>数据2-3 </li>

<li>数据2-4 </li>

<li>数据3-1 </li>

<li>数据3-2 </li>

<li>数据3-3 </li>

<li>数据3-4 </li>

<li>数据4-1 </li>

<li>数据4-2 </li>

<li>数据4-3 </li>

<li>数据4-4 </li>

</ul>

<div style="clear:both"></div>

</div>

</body>

</HTML>

楼主你还是使用XHTML 1.0标准吧，不然对各个浏览器兼容不好

bhbhxy 2009-11-08

打赏
举报

把你原来的代码换个头，用这个
<!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">
然后再以此为标准改吧

上面的代码确实和你原来的效果不一样
但是能做到浏览器之间的兼容，稍微修改一下
就能达到你原来想要的效果

我看你有戏 2009-11-08