代码如下:
<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>学习前端的新手,有问题可以讨论呀
谢谢,回答很详细,就像您说的“尽量不是为了并排效果不要随意的用浮动float” ,那我要做一个横向菜单而要使用li有没有更好的方法呢? 请帖出代码,我会追加更多分数^_^。
追答常见的横向菜单都是用ul li标签做的。
因为ul的定义就是无序列表,是一个列表的概念。
你可以用一个div框住这个ul,然后div设置高度和背景
或者你可以像百度首页那样用a标签模拟横向菜单。
因为这种样式太多了,我实在不好说给你个什么代码。
你可以都去网上浏览下,用好浏览器的审查元素的功能(部分浏览器快捷键F12,因为内核的不同,支持的程度也不同。),多去看大网站或者做的好的网站看看。好好学习下。
谢谢,成功了,请问这样设置的原理是什么呢??
追答ul设为浮动后高度就变为0了,但li却拥有宽高,将overflow设置为自动意思是当内容超出容器后容器自动增大宽高,所以ul就具有了高度。