交错或楼梯 - 一个菜单 [英] Stagger or Stair-Case a Menu

问题描述

我有一个菜单，从通常的无序列表创建，我想用CSS水平样式，以便每个菜单项比以前的条目稍低。结果将是一个楼梯效果：

 首页
新闻
关于
联系
  

上面的示例显示了每个菜单项的全行位移，但是我真正想要的是pixel层级控制楼梯套管，以便每个菜单项可能只是一半或四分之一字符高度偏离以前的菜单项。

如何使这个特技工作与CSS，最好没有uing CSS3？更准确地说，是不是有一种方法来指定这个表面是要渲染在位置X，Y 相对于先前渲染的项目？

c>

最简单的方法是手动添加 margin-top

如果您在每个 li 上都有课程：

  .first-li {margin-top：5px; } 
 .second-li {margin-top：10px; } 
 / * ... * / 
  

如果没有，则：

  #menu li：nth-​​child（1）{margin-top：5px; } 
 #menu li：nth-​​child（2）{margin-top：10px; } 
 / * ... * / 
  

旧版浏览器不支持 ：nth-​​child 。有是一种解决方法，如果您需要支持旧版浏览器，并且您不想为每个 li 添加类。

I have a menu, created from the usual unordered list, that I want to style horizontally with CSS so that each menu entry is slightly lower than the prior entry. The result would be a stair-case effect:

Home
      News
             About
                    Contact

My example above shows a full-line displacement for each menu entry, but what I actually want is pixel-level control of the stair-casing, so that each menu entry is potentially just a half or quarter character height displaced from the prior menu entry.

How do I make this trick work with CSS, preferably without uing CSS3? More precisely, isn't there a way to specify "this surface is to be rendered at position X,Y relative to the prior rendered item?"

解决方案

The simplest way would be to manually add a margin-top to each li.

If you have a class on each li:

.first-li  { margin-top: 5px; }
.second-li { margin-top: 10px; }
/* ... */

If not, then:

#menu li:nth-child(1) { margin-top: 5px; }
#menu li:nth-child(2) { margin-top: 10px; }
/* ... */

Older browsers don't support :nth-child. There is a workaround if you need to support older browsers and you don't want to add a class to each li.

这篇关于交错或楼梯 - 一个菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！