是否有可能将ul li内联错开菜单？

Question

我有一个背景如下的菜单：

我正在使用菜单项的无序列表 - 家庭，产品，特价，文章和联系方式，并希望在相应的标签中显示所有项目：

使用CSS我可以获得列表中的第一项与其框对齐但不是其余的 -

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

我尝试在个别项目中添加填充但没有运气。

此外，我尝试在各个项目中添加margin-top（根据此问题Stagger or Stair-Case a Menu），但这对我来说似乎也不起作用。

甚至可能错开这样的李物品吗？或者有更好的方法可以做到这一点吗？

理想情况下，我希望能够做的就是尽可能使用CSS创建标签框效果。然而，我仍然被错开的布局所困扰。

任何想法都赞赏！

Answer 1

确保你的李相对定位。

然后使用top来设计样式。

看我的代码......

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>

Answer 2

这应该做你想做的事：

#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>

输出：