是否有可能在菜单中错开内联？

我使用的菜单项的无序列表 - 主页，产品，特价，文章和联系，并希望得到所有显示的项目其相应的标签：

使用CSS我可以在列表中获得的第一个项目排队与框，但不休息 -

#top_menu li { 
    display: inline-block; 
    padding-right: 44px; 
    padding-top: 73px; 
}

我曾尝试添加填充到单个项目，但没有任何运气。

此外，我已经尝试将margin-top添加到单个项目中（根据此问题Stagger or Stair-Case a Menu），但这似乎对我无效。

是否有可能交错这样的项目？或者有没有更好的方法来做到这一点？

理想情况下，我希望能够做到的是如果可能的话，纯粹用CSS创建标签盒效果。然而，由于交错布局，我仍然难住。

任何想法赞赏！

来源

2016-05-16 Mhluzi Bhaka

当然它是，与'位置的一些组合：相对/ absolute'然后'顶部/左/底部/ right'性质，或甚至使用'margins'（负如有必要）。 – Vucko

请您可以提供您迄今为止所拥有的完整的HTML和CSS。 –

确保你的锂是相对定位的。

然后用顶部风格。

看到我的代码...

ul { 
 
    margin-left: .25em; 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    position: relative; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    display: inline-block; 
 
    width: 75px; 
 
    height: 30px; 
 
    border: 1px solid red; 
 
} 
 
li:nth-child(2) { 
 
    top: 10px; 
 
} 
 
li:nth-child(3) { 
 
    top: 20px; 
 
} 
 
li:nth-child(4) { 
 
    top: 30px; 
 
} 
 
li:nth-child(5) { 
 
    top: 40px; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

来源

2016-05-16 13:47:59 haltersweb

这是一个。谢谢！ –

@haltersweb，也谢谢你，我鼓励我弄清楚如何使用Runnable Code Snippets而不是像jsfiddle这样的外部工具。 –

这应该做你想做的事：

#top_menu { 
 
    list-style: none; 
 
} 
 
#top_menu li { 
 
    float: left; 
 
    clear: none; 
 
    position: relative; 
 
    padding: 2px 6px; 
 
    margin-right: 2px; 
 
    background-color: #09f; 
 
} 
 
#top_menu li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#top_menu li:nth-child(2) { 
 
    margin-top: 5px; 
 
} 
 
#top_menu li:nth-child(3) { 
 
    margin-top: 10px; 
 
} 
 
#top_menu li:nth-child(4) { 
 
    margin-top: 15px; 
 
} 
 
#top_menu li:nth-child(5) { 
 
    margin-top: 20px; 
 
}

<ul id="top_menu"> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
</ul>

输出：

来源

2016-05-16 13:52:36

真棒回应！尽管如此，必须先将它交给@haltersweb。 –

@MhluziBhaka不用担心，很高兴你明白了！ –

是否有可能在菜单中错开内联？

回答

相关问题