Rumah > hujung hadapan web > html tutorial > ul li实现表格问题_html/css_WEB-ITnose

ul li实现表格问题_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 12:19:17
asal
1177 orang telah melayarinya

css

我想用ul+li实现表格功能,代码如下


  
  
  
  





  • aaa

  • bbb

  • ccc

  • ddd

  • eee

  • fff

  • ggg

  • hhh

  • iii

  • jjj

  • kkk

  • lll




 



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

回复讨论(解决方案)

生成空li来补满

不行啊,我用li来显示数据是因为我可能要将li删除的,如果用table的话,无法做到删除一个数据后,后面的单元格自动向前补上,所以才想起来用li来做的,用空li的话,增加时要删除多余的空li,删除时要增加缺少的空li,还要统计是否空li超过10个,太麻烦了,所以才想用css来解决问题的

CSS貌似解决不了,只能JS做判断。

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

有没有高手啊?

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;
   }

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

*{margin:0;padding:0}
Salin selepas log masuk

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

高手请帮忙!

有人知道吗?

我有一个很无耻的办法,背景图片。画好一行的表格线框,竖向重复显示,作为整个的背景图片,然后取消所有LI的边框什么的。

自己掌握好LI的间距行距,把数据全放到背景图片的“单元格”里面。

然后你就可以用JS尽情的增删你的LI了,全删光了,这表格也在。

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

我有一个很无耻的办法,背景图片。画好一行的表格线框,竖向重复显示,作为整个的背景图片,然后取消所有LI的边框什么的。

自己掌握好LI的间距行距,把数据全放到背景图片的“单元格”里面。

然后你就可以用JS尽情的增删你的LI了,全删光了,这表格也在。
这个办法 倒是可以一试 但是要做更改。不是 画好一行的 背景了 而是 整夜的或者 你这个块的 整块的。另外 做背景图的时候 要注意 背景图片的拉伸尺寸所以 你的 高度 要固定住 这个 你自己 注意下 。要不然 背景拉伸后  行高也会 变化

办法没有 无耻不无耻了。只要能解决问题 就行。其实这思路挺 独到的。

我有一个很无耻的办法,背景图片。画好一行的表格线框,竖向重复显示,作为整个的背景图片,然后取消所有LI的边框什么的。

自己掌握好LI的间距行距,把数据全放到背景图片的“单元格”里面。

然后你就可以用JS尽情的增删你的LI了,全删光了,这表格也在。

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

再请高手出马

用table js 增加删除td。

估计等用到js代码了吧!

估计等用到js代码了吧!

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

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan