解决li设置浮动ul高度无法被撑开问题

最新推荐文章于 2021-11-20 18:57:57 发布

Hero4399

最新推荐文章于 2021-11-20 18:57:57 发布

阅读量6.2k

点赞数 1

文章标签： li ul 父元素浮动自适应

本文链接：https://blog.csdn.net/Hero4399/article/details/78169100

版权

一

最简单也是比较常用的方法就是直接给ul设置高度,当然是在知道ul的高度而不是自适应的时候使用

二

最为使用的方法,再添加一个li或者div都可以,不需要浮动,样式只需要设置clear:both即可,十分好用

三

在IE下使用的,不过谷歌浏览器好像也兼容,利用属性zoom : 1;overflow:auto;即可高度自适应和兼容IE6

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hero4399

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ul,li无法撑开div的问题

易天海

03-21

1436

在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下，而子容器li又是浮动的 ul,li添加了浮动的情况下，就会导致即使内容超过了div自身的高度也无法把div撑开，高度为0 在一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了 <div id="item1" class="divFav mui-active">...

关于给ul加了背景颜色background-color 然后背景颜色不生效的问题。原因：li没有清除浮动

weixin_44746504的博客

04-24

3577

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作.

参与评论您还未登录，请先登录后发表或查看评论

li设置浮动，ul高度为0，无法撑起来的解决方法

qq_39232672的博客

05-18

503

方法之简单到，我每次都记不住：在ul的最后，添加一个空的li，并对该空li设置 clear:both; 嗯，就是这么简单

给li设置float浮动属性之后，无法撑开外层ul的问题。

weixin_30907935的博客

08-17

273

最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<div style="clear:both"></div>解决了，但自己不是特别明白，又在网上查了相关内容，是因为给li设置了浮动之后它就脱离当前正常的文档流，所以没办法撑开外层ul的高度。以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。 <!DOCTYPE html ><h...

如何解决ul无法撑开div高度的情况

cyyax的博客

04-06

9803

很多朋友反映用上面的方法后，在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下，而子容器又是浮动的。例如内容1内容1 其中class为fuqin的div有浮动的li，当li比较多的时候，即便是div设置的是最小高度，也无法被撑开。原因就在于作为子容器的li是浮动的即。在这种情况下，即便是li的内容超过了div的高度，div也无法撑开。解决方法如下：

浮动的li无法撑开ul

最新发布

12-12

然而，如果所有`<li>`都设置了浮动，它们可能会导致`<ul>`的高度塌陷，也就是说，`<ul>`容器本身不会随着包含的浮动内容自动增加高度。这通常是因为浏览器为了保持正常的渲染顺序，并不会计算浮动元素的高度。解决...

里面的div怎么撑开外面的div让高度自适应

09-22

如果内部的 `div` 或其子元素（如 `li`）设置了浮动（`float`），那么在某些情况下，即使设置了 `min-height`，外部 `div` 也可能无法正确地扩展。这是因为浮动元素不会影响其父元素的高度计算。为了解决这个问题，...

详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

11-21

然而，这种技术带来了一个问题，即浮动元素可能会导致其父元素的高度塌陷，也就是父元素无法正确地包含浮动的子元素，从而在视觉上看起来父元素的高度消失了。浮动元素的特性之一是“脱离文档流”。这意味着当一个...

html 为什么ul不撑开,给li设置float浮动属性之后，无法撑开外层ul的问题。

weixin_28736335的博客

06-29

1420

以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。给li设置float浮动属性之后，无法撑开外层ul的问题。ul{border: 1px solid #000;width: 200px;height: auto;margin-top: 100px;}li{float: left;list-style: none;margin-left: 10px;}星期一星期二星期三星期四星期五星期...

解决使用了float后IE6下li高度比Firefox或者IE8高的问题

weixin_34128237的博客

06-09

在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题，因为包含浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。先看一个例子： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...

ul标签下的li为浮动时如何再不设置ul高度的情况下撑开ul标签

weixin_44950209的博客

11-20

333

<ul style="overflow:hidden;clear:both;"> 　　　<li></li> </ul> 用于任何由于内部内容浮动之后，高度不能自适应的div元素

高度撑开问题（ul、folat等）

冉然的博客

06-08

715

1、div内部存在ul时，div高度的自适应方法，给div添加：overflow: auto;2、当页面中存在folat:flet，高度撑开 overflow: auto;

IE6/7中li浮动外边距无法撑开ul的解决方法

weixin_30617797的博客

11-14

101

昨天群里有人提出了这样的问题: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试</title> <style...

CSS网页制作技巧:ul的li高度不兼容问题

u013437428的专栏

01-14

736

在页面中有时候使用ul li列表时ie6、ie7、ie8、FF的高度会不一样(其中ie6与ie7高度一样，ie8与FF高度一样)，设置高后使用 overflow:hidden;也无济于事，这个问题一直困扰着我，以至于我后来只能使用DIV来做列表，但是这样只能说是对付上的，但没从实际上解决这个问题。后来在网上找到了一个方法，在li样式上加上vertical-align:bottom便解决了，但原

css中ul标签高度超过li标签,li浮动时ul高度为0，解决ul自适应高度的几种方法

weixin_34366539的博客

08-03

2362

在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度，即ul标签添加height属性，代码如下:ul {list-style-type: none;height: 30px; /*添加高度属性*/...

div里ul li浮动之后父容器高度不能自动增加的解决方法

GrahamACER的博客

09-14

4121

之前在Github上fork了一个题目，按照流程图来制作一个电商网站…但是遇到点问题如果一个Div内的Ul，li元素浮动的话，这个DIV的高度是没办法被正常的撑起来（显示高度为0）下图一共4个div，我给每个div设置了1px灰色的border-bottom。但是一预览发现border叠在了一起，说明div高度为0 这个问题出现的原因是因为在一个区块内的元素被应用了float

div ul li 嵌套后如何解决增加多个li后ul高度自适应问题

QC班长的博客

07-30

4375

关键属性设置： .m_wrapper ul { list-style:none; padding:2px 0px 0px 0px; width:100%; position:absolute; bottom:30px; left:0px; z-index:999; overflow-y:auto; max-height:500px