ul标签的高度为0

最新推荐文章于 2021-08-04 08:51:40 发布
最新推荐文章于 2021-08-04 08:51:40 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： css

由于项目中使用ul+li的布局方式，在ie8、chrome浏览器中，包裹浮动的li元素的外层ul高度为0，ie7浏览器和ie8兼容模式显示正常，这是典型的浏览器兼容性问题。

解决办法：

第一种：设置ul的style属性

代码如下: overflow:hidden;//超出元素纬度范围的内容的可见性：隐藏

第二种：设置ul的style属性

代码如下: float:left; //浮动：左

第三种：在ul标记内加空div

代码如下: <div style=" clear:both; visibility:hidden;">


LfrogL
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ul高度为0的解决方案
dly120219891208的专栏
06-19 933
ul:after {       content:".";       display:block;       clear:both;       height:0;   }  ul {       margin:0;       padding:10px;       list-style:none;       background-color:#006699;       zoom:1;/
ul高度显示为0的问题
AndrewNeo
06-22 6213
当一个元素只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，和高度为0效果一样，为了解决这种情况，需要清除浮动。下面是具体的问题和方法。 代码： &lt;div id="box"&gt; &lt;ul&gt; &lt;li style="background: #3CB371;"&gt;&lt;/li&gt; &lt;li style
ul 高度css,css:ul li ul li height
weixin_29932039的博客
08-04 293
Vyacheslav Loginov0csshtml-lists我想像所有其他菜单一样设置游戏菜单的高度,但它不起作用.怎么了？这是我的代码:NewsApplicationsGamesAppearence#left-menu ul.menu {display: block;list-style-type: none;margin-left: -40px;}#left-menu ul.menu li...
li浮动、ul自适应高度
大人的技术博客
09-15 495
ul {z-index:1;overflow:hidden;} ul li {float:left;}
css中ul标签高度超过li标签,li浮动时ul高度为0，解决ul自适应高度的几种方法
weixin_34366539的博客
08-03 2185
在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度，即ul标签添加height属性，代码如下:ul {list-style-type: none;height: 30px; /*添加高度属性*/...
CSS实现ul和li横向排列的两种方法
11-21
为解决这个问题，可以给父元素添加`clearfix`类或者设定一个固定的宽度和高度。 ### 方法二：使用`display:inline-block` 另一种方法是将`<li>`元素的`display`属性设置为`inline-block`，使其既保持块级元素的...
CSS 用ul li做圆角表格
09-25
- `<ul>`标签用于定义一个无序列表。 - 每个列表项通常由`<li>`标签表示。 2. **`<li>`（列表项）**： - `<li>`标签用于定义列表中的每一项。 - 可以出现在`<ul>`或`<ol>`（有序列表）标签内部。 3. **CSS ...
用ul、li标签创建css横向导航菜单示例
09-25
这里，我们将`<ul>`的`margin`和`padding`设置为零，并使用`white-space: nowrap;`防止文本换行。同时，我们为`<li>`元素设置`display: inline;`使其并排显示。 CSS代码如下： ```css #nav { height: 30px; width...
简单实现Bootstrap标签页
08-31
CSS代码部分主要定义了标签页和内容区域的布局和样式，包括宽度、高度、边距、背景色等，以便更好地呈现视觉效果。 实现Bootstrap标签页的基本步骤如下： 1. 引入Bootstrap的CSS和JavaScript库，通常通过CDN链接或...
ul结合CSS制作网页相册滑动浏览效果
12-09
- **宽度和高度**：设置图片容器（`<a>`标签）的宽度和高度，以及过渡效果（例如`#gallery li a:hover {width: 320px;}`）。 - **溢出隐藏**：使用`overflow: hidden;`来截断超出容器的部分，以实现平滑的滑动效果...
解决ul高度自适应问题
ROVAST的专栏
03-30 2029
在使用ul   li布局的时候，会出现ul的高度不能随li的变化而动态拓展高度
ul，li，所有行跟随最大高度自适应
zxp_smile的博客
07-23 867
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> ul{ width: 100%; flex-wrap: wrap; /*align-items: s...
如何实现固定高度的ul中，li元素的底部对齐
weixin_40098371的博客
04-26 3295
今天在做项目中（移动端页面 效果图为宽度720px    设置html font-size:72px），突然间被一个小问题困扰了一下下，不知道大家有没有遇到过：ul高度100px li中的背景图片宽高均为12px.li的位置距离ul的下部高度26px.此时要实现图片效果，我采用的办法是利用line-height.设置ul的样式为：{    position: absolute;    z-inde...
div ul li 嵌套后解决高度自适应方法
iteye_8029的博客
10-19 1492
方法一： div 自适应宽度 很简单 ，你应该设置div的display:inline-block 然后不要设置宽度就行了 方法二： &lt;body bgcolor="#0B3D82"&gt; div ul li 嵌套后解决高度自适应办法: html代码如下 &lt;div class="main_div"&gt; &lt;ul&gt; &lt;li&gt;&lt
如何解决ul无法撑开div高度的情况
cyyax的博客
04-06 9664
很多朋友反映用上面的方法后，在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下，而子容器又是浮动的。例如  内容1内容1  其中class为fuqin的div有浮动的li，当li比较多的时候，即便是div设置的是最小高度，也无法被撑开。  原因就在于作为子容器的li是浮动的即 。在这种情况下，即便是li的内容超过了div的高度，div也无法撑开。  解决方法如下： 
li浮动时ul的高度自适应解决
Oliver尹的博客
06-10 2537
问题：当给li设置了浮动，也就是float:left或者right后，ul的高度就没有了 解释： 不仅仅是li，当给块级元素设置浮动后，那么该元素就直接脱离文档流了，换句话说就是元素已经父元素脱离一个层面了，假如父元素的高度需要由子元素的高度决定，那么必须把子元素拉回文档流，也就是将子元素拉回跟父元素一个层面 解决办法： 父元素用clear的方式清除浮动 &lt;style&gt; ...
ul具有最小高度和自动延伸高度的css设置
beimuaihui的专栏
12-24 3606
在调整ul里面的内容高度时，发现要么是ie不行，要么是FF不行，后来发现import一招。!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：box{color:red !important;} 最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持
CSS ul标签内多个li 标签高度自适应填充
最新发布
05-11
要让 `ul` 中的多个 `li` 标签高度自适应填充，可以通过以下 CSS 代码实现： ```css ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } li { flex: 1; padding: 10px; box-sizing: border-box; } ``` 上述代码中，我们使用了 Flexbox 布局来让 `li` 标签自适应填充。`ul` 元素设置了 `display: flex;` 和 `flex-wrap: wrap;` 属性，使得 `li` 元素可以自动换行。为了去掉 `ul` 标签的默认样式，我们还加了 `list-style: none;`、`padding: 0;` 和 `margin: 0;` 属性。 `li` 元素设置了 `flex: 1;` 属性，使得每个 `li` 标签可以平均分配剩余空间。同时，我们还设置了 `padding: 10px;` 和 `box-sizing: border-box;` 属性，使得 `li` 标签内部的元素可以自适应填充，而不会因为 padding 而超出父元素的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值