Heim > Web-Frontend > HTML-Tutorial > ul li实现表格问题_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:19:17
Original
1187 Leute haben es durchsucht

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}
Nach dem Login kopieren

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

高手请帮忙!

有人知道吗?

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

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

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

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

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

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

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

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

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

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

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

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

再请高手出马

用table js 增加删除td。

估计等用到js代码了吧!

估计等用到js代码了吧!

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage