CSS实现div或ul,li水平对齐不换行

 

去掉A标签的：

 

 

增加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这个属性解决了这个问题。

我们直到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的作用应该是相辅相承的