ul li实现表格问题

usa112233 2013-02-20 03:23:52

我想用ul+li实现表格功能，代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; chats_rset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
ul {
list-style:none;
width:100%;
border:solid 2px red;
border-bottom-width:0px;
border-left-width:0px;
}
li {
float:left;
width:10%;
border:solid 2px red;
border-right-width:0px;
border-top-width:0px;

}
</style>
</head>
<body >
<div>

<ul id="cyList" >
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
<li>jjj</li>
<li>kkk</li>
<li>lll</li>

</ul>
</div>
</form>

</body>
</html>
每行10列，现在的问题是最后一行不足10个li，页面上就会有空的，样子很难看，如何补足它？最好要CSS方法解决

...全文

406 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

usa112233 2013-03-08

打赏
举报

引用 18 楼 mycoolaccount 的回复:

不理解，为何不直接用table?

我用li来显示数据是因为我可能要将li删除的，如果用table的话，无法做到删除一个数据后，后面的单元格内容自动向前补上

mycoolaccount 2013-03-07

打赏
举报

不理解，为何不直接用table?

yanglo090506ym 2013-03-07

打赏
举报

估计等用到js代码了吧！

lujun82826 2013-03-05

打赏
举报

估计等用到js代码了吧！

90天内只能修改一次 2013-03-04

打赏
举报

用table js 增加删除td。

usa112233 2013-03-04

打赏
举报

再请高手出马

usa112233 2013-02-27

打赏
举报

引用 11 楼 sunli555 的回复:

我有一个很无耻的办法，背景图片。画好一行的表格线框，竖向重复显示，作为整个的背景图片，然后取消所有LI的边框什么的。自己掌握好LI的间距行距，把数据全放到背景图片的“单元格”里面。然后你就可以用JS尽情的增删你的LI了，全删光了，这表格也在。

太麻烦了，本来的目的就是想偷懒，这样做是越搞越复杂

sunli555 2013-02-25

打赏
举报

我有一个很无耻的办法，背景图片。画好一行的表格线框，竖向重复显示，作为整个的背景图片，然后取消所有LI的边框什么的。自己掌握好LI的间距行距，把数据全放到背景图片的“单元格”里面。然后你就可以用JS尽情的增删你的LI了，全删光了，这表格也在。

我自是年少-韶华倾负 2013-02-25

打赏
举报

很明显不能光用css解决。css 始终只是来表现而不能做出判断。

引用 11 楼 sunli555 的回复:

我有一个很无耻的办法，背景图片。画好一行的表格线框，竖向重复显示，作为整个的背景图片，然后取消所有LI的边框什么的。自己掌握好LI的间距行距，把数据全放到背景图片的“单元格”里面。然后你就可以用JS尽情的增删你的LI了，全删光了，这表格也在。

这个办法倒是可以一试但是要做更改。不是画好一行的背景了而是整夜的或者你这个块的整块的。另外做背景图的时候要注意背景图片的拉伸尺寸所以你的高度要固定住这个你自己注意下。要不然背景拉伸后行高也会变化办法没有无耻不无耻了。只要能解决问题就行。其实这思路挺独到的。

usa112233 2013-02-24

打赏
举报

有人知道吗？

usa112233 2013-02-23

打赏
举报

高手请帮忙！

usa112233 2013-02-22

打赏
举报

不行，最后一行单元格没补上

usa112233 2013-02-21

打赏
举报

有没有高手啊？

play_cheng 2013-02-21

打赏
举报

ul的边框不要了，直接加li的border就好了

孤舟一叶 2013-02-21

打赏
举报

上边添加个这个不推荐的办法

*{margin:0;padding:0}

叫我三三 2013-02-21

打赏
举报

ul { list-style:none; border-left:solid 2px red; border-top:solid 2px red; width:100%; } li { float:left; width:10%; border-right:solid 2px red; border-bottom:solid 2px red; }