①首先你的<li>是浮动的，也就是说li脱离了文档流，故它的父级ul是无法包围li的，所以li的内容增大缩小跟ul关系是不大。
②如果是你想实现：让li水平排列。同时div的内容增加后，div向下延伸。
可以直接限制li的宽度：
li {
float:left
width:100px
}
效果如下：
<ul>
<li>
<div>测试信息a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
</li>
<li>
<div>测试信息</div>
</li>
<li>
<div>测试信息bb b b b b b b b b b b b b b b b b b b</div>
</li>
</ul>
谈不上谁取代谁表格在呈现数据的时候，比较好
div+css 在定义网页结构的时候比较好
不懂你问的紧密是什么意思
建议看些视频，从css基础入门（如四大基础，盒子模型，标准流，定位，浮动，），然后div+css
推荐你一个网站，有很多免费视频看，或者你买书，我买过了的，觉得很不错，改网站的论坛问问题也不错，不是广告，只是觉得这个比较好，不买书，也可以免费看所有的视频，向老师提问，推荐而已
http://learning.artech.cn
