子元素浮动后父元素自适应高度,ul->li标签设定宽高后overflow无效,li标签里面的内容多出内容会换行

子元素浮动后,父元素无法自适应高度。
解决办法:
1.设置父元素float属性;这样,父元素也是脱离当前文档流,子元素和父元素一起脱离,并且子元素仍在父元素内,父元素内容不空了,所以高度会适应子元素高度。
2.在最后一个设置浮动的子元素后加一个空div,清除浮动;
3.父元素设置overflow:hidden属性;
4.不要浮动,子元素使用display:inline-block;

ul->li标签设定宽高后overflow无效,li标签里面的内容多出内容会换行
解决办法:

1.强制隐藏
li{
display:block;
white-space:nowrap;//强制不换行
overflow:hidden; //自动隐藏文字
text-overflow: ellipsis; //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

2.设置line-heigh行高隐藏
li{
display:block;
height:25px;
line-height:25px;
}
**ie浏览器设置line-height无效,需要给li标签加上display:inline

普通浏览器和兼容ie浏览器css样式写法

.chie{
    margin:0px;padding:0px;display:table;margin-left:300px;display:block;*margin-left: 305px;
}

margin-left只有ie浏览器会解析,适用于普通浏览器左边距没有问题,二在ie浏览器有问题,可以写*margin-left重写前面的样式

ie不兼容display:inline-block写法
***ie6、7浏览器不识别display:inline-block 应该写为display:inline

ie浏览器中div下的ul标签不居中显示
一般浏览器父元素设置text-align:center属性后,u标签设置margin:0 auto;ul元素就能居中显示了。ie是个列外
解决办法:
在ul中加入css样式:display:inline ie6、7不支持display:inline-block

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值