我有一个菜单,是根据通常的无序列表创建的,我想使用 CSS 对其进行水平样式设置,以便每个菜单条目都略低于前一个条目。结果将是阶梯效应:
Home
News
About
Contact
上面的示例显示了每个菜单条目的全行位移,但我真正想要的是楼梯外壳的像素级控制,以便每个菜单条目可能仅比前一个菜单条目位移一半或四分之一字符高度。
我如何使这个技巧与 CSS 一起工作,最好不使用 CSS3?更准确地说,是否有办法指定“此表面将在位置 X,Y 处渲染”relative到之前渲染的项目?”
最简单的方法是手动添加margin-top
每一个li
.
如果你每门课程都有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
. There 是一个解决方法如果您需要支持较旧的浏览器并且不想为每个浏览器添加一个类li
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)