CSS实现div或ul,li⽔平对齐不换⾏
在⽹页前端开发中，我们可能会经常⽤到⾛马灯特效，于是乎就需要⽤CSS来实现⽂字或图⽚⽔平对齐但不换⾏的效果，⽤div+table可是很实现这个效果，但是要⽤div或ul,li来做就难了，⼤部分⼈都会想到⽤overflow:hidden+固定宽度width来控制div或li浮动元素不会换⾏，但这样效果很差或根本⽆效。其实我们只需要⽤到三个CSS样式就能搞定它了，它们分别是display:inline-block，overflow:hidden和white-space:nowrap
下⾯就来分析⼀下它们的作⽤：
⾸先，是overflow:hidden。
overflow:hidden是作⽤是什么呢？⼤多数⼈对这个样式的理解仅仅局限于隐藏溢出，⽽对于清除浮动这个含义不是很了解。
⼀提到清除浮动，我们就会想到另外⼀个CSS样式：clear:both，我相信对于这个属性的理解⼤家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下⾯来详细的阐述⼀下。
<div id="outer">
<div id="inner"></div>
</div>
这是⼀个常⽤的div写法，下⾯我们来书写样式。⼤家可以在DW中⾃⼰做试验
#outer{ width:500px;  background:#000; height:500px;}
#inner{ float:left; width:600px; height:600px; background:red;}
可以看到，我给inner这个id加了⼀个浮动，我们常规的理解是，我们允许inner这个id的div的右边出现其他的内容，只要它的宽度不超过outer这个div和inner这个div的剩余值。
如果div outer中还包含其他的div，我不允许它出现在inner的右侧，我们则⽤样式clear:both指定这个div，不允许它浮动在inner右侧。
这些在ie6⾥⾯是正确的。但是在⽕狐或者其他浏览器⾥⾯，我们发现问题并⾮如此简单。我们发现，当inner这个div的宽度和⾼度都⼤于wai这个div的时候，outer并没有被inner撑开⽽是依旧显⽰为我们指定的宽⾼。在我的例⼦中，都是500。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别⼈在类似的情况下给outer这个div加了⼀个overflow:hidden这个属性解决了这个问题。
css特效文字
我们直到overflow:hidden这个属性的作⽤是隐藏溢出，给outer加上这个属性后，我们的inner的宽⾼⾃动的被隐藏掉了。另外，我们再做⼀个试验，将outer这个div的⾼度值删除后，我们发现，outer的⾼度⾃动的被inner这个div的⾼度值给撑开了。
说到这⾥，我们再来理解⼀下“浮动”这个词的含义。我们原先的理解是，在⼀个平⾯上的浮动，但是通过这个试验，我们发现，这不仅仅是⼀个平⾯上的浮动，⽽是⼀个⽴体的浮动！
这就是overflow:hidden这个属性清除浮动的准确含义。
其次，是display:inline-block
display:inline-block
简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同⼀⾏内，也就是⽔平对齐但不会换⾏，⽽⽤display:inline 和display:block都实现不了，但是这个属性⽬前不是所有的浏览器都⽀持，只有Opera和Safari⽀持，FireFox3和IE8都会⽀持，Firefox2和IE使⽤特殊办法可以实现这种效果。
最后，是white-space:nowrap
white-space:nowrap本来的⽤途是让⽂本内容不会出现换⾏，其实它还能⽤容器(div,ul等)上。在ul上加样式white-space:nowrap，可以让其内部的li对象，⽔平放置⽽不会换⾏，跟display:inline-block的作⽤应该是相辅相承的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。