您可以使用 z-index 和一些定位来实现您正在寻找的内容。
<ul>
<li class="first">uno</li>
<li class="second">dos</li>
<li class="third">tres</li>
<li class="fourth">quatro</li>
</ul>
和CSS:
li{display:inline-block;border:1px solid red; padding: 10px;float:left; position:relative; min-width:100px}
li.first{background: green; z-index: 100; left: 0}
li.second{background:yellow; z-index: 99;left: -10px;}
li.third{background:purple; z-index: 98;left: -20px;}
li.fourth{background:brown; z-index: 97;left: -30px;}
你明白了。
看看这个例子:http: //jsfiddle.net/JKmEQ/
这是一个仅 css 的选项:
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>quatro</li>
</ul>
li{display:inline-block;border:1px solid red; padding: 10px;float:left; position:relative; min-width:100px}
li:first-child{background: green; z-index: 100; left: 0}
li:nth-child(2){background:yellow; z-index: 99;left: -10px;}
li:nth-child(3){background:purple; z-index: 98;left: -20px;}
li:last-child{background:brown; z-index: 97;left: -30px;}
http://jsfiddle.net/TkyKj/
如果您关心旧的 IE 支持,可能无法正常工作。在这种情况下,您可能需要一些 js 来为您添加类。
http://caniuse.com/#search=nth