关于css中ul高度的问题
代码如下：
<style>
li {
float:left;
}
</style>
<ul>
<li>
<div>测试信息</div>
</li>
<li>
<div>测试信息</div>
</li>
<li>
<div>测试信息</div>
</li>
</ul>
问题是，在不给ul固定高度的情况下，怎样让ul的高度随着li里面的内容增加而被撑开？
①首先你的<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>
追问谢谢您的回答。但是，这样设置后，ul的高度还是为0px，不符合我的题意。
如果你要做的是一个导航栏 可以这么写：
<head><meta charset="UTF-8">
<style>
.navbar{
height: 50px;
line-height: 50px;
}
.navbar li {
float: left; /* 让 3个 测试信息 一行显示 */
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">测试信息</a></li>
<li><a href="#">测试信息</a></li>
<li><a href="#">测试信息</a></li>
</ul>
</div>
</body>
学习前端的新手，有问题可以讨论呀
飘了以后就相当于和其他元素不在一个世界一样。
所以ul不承认这些浮动元素，固然没有高度。
如果你将ul也添加 float:left 飘动，那么ul自然和li在一个世界内，自然有了高度。
但是尽量不是为了并排效果不要随意的用浮动float。
如果全篇都用了浮动不容易维护和修改
如果你是想让飘的元素和下文不飘的元素合为一体，那么就可以
在最后的一个li元素中添加clear:left;
或者在下文第一个元素中添加clear:right;
后者添加一个空的div <div style="clear:both;"></div>
就能取消浮动了追问
谢谢，回答很详细，就像您说的“尽量不是为了并排效果不要随意的用浮动float” ，那我要做一个横向菜单而要使用li有没有更好的方法呢？ 请帖出代码，我会追加更多分数^_^。
追答常见的横向菜单都是用ul li标签做的。
因为ul的定义就是无序列表，是一个列表的概念。
你可以用一个div框住这个ul，然后div设置高度和背景
或者你可以像百度首页那样用a标签模拟横向菜单。
因为这种样式太多了，我实在不好说给你个什么代码。
你可以都去网上浏览下，用好浏览器的审查元素的功能（部分浏览器快捷键F12，因为内核的不同，支持的程度也不同。），多去看大网站或者做的好的网站看看。好好学习下。
overflow: auto;
}追问
谢谢，成功了，请问这样设置的原理是什么呢？？
追答ul设为浮动后高度就变为0了，但li却拥有宽高，将overflow设置为自动意思是当内容超出容器后容器自动增大宽高，所以ul就具有了高度。