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

本是古典何须时尚 2022-07-15 15:30 162阅读 0赞

**子元素浮动后，父元素无法自适应高度。**  
解决办法：  
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