CSS故障在列表菜单(UL / LI)与用户定义的图标

Question

我有一个LI/UL菜单，用户自己在其中存储项目。

问题:

1. 图标(图像)的左/顶部有一个小值(红色/气泡)，它没有正确定位在子项上
2. 文本应该在图像高度的中间，但它总是在地线上…

谁有提示或代码示例如何解决这个问题?

ul.navigation {
  padding: 0px;
  margin: 0px
}
.navigation .item.first {
  padding: 0px
}
.navigation li {
  list-style: none;
  padding-left: 25px;
}
.navigation .item img {
  height: 25px;
}
.navigation .item span {
  display: inline-block;
  line-height: 20px;
  height: 20px;
}
.navigation .item i {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  z-index: 5;
  left: 40px;
}

<ul class="navigation">
  <li class="item first">
    <i>24</i>
    <img src="assets/icons/dashboard.png" />
    <span>Caption of Navigation Item</span>
    <ul class="navigation">
      <li class="item">
        <i>24</i>
        <img src="assets/icons/dashboard.png" />
        <span>Caption of Navigation Item</span>
      </li>
    </ul>
  </li>
</ul>

Answer 1

这是一个基于您的需求的工作模板:

ul.navigation {
  padding: 0px;
  margin: 0px
}
.navigation .item.first {
  padding: 0px
}
.navigation li {
  position: relative;
  list-style: none;
  padding-left: 25px;
}
.navigation .item img {
  height: 40px;
  vertical-align: middle;
}
.navigation .item span {
  line-height: 40px;
}
.navigation .item i {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  z-index: 5;
}

<ul class="navigation">
  <li class="item first">
    <i>24</i>
    <img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="">
    <span>Caption of Navigation Item</span>
    <ul class="navigation">
      <li class="item">
        <i>24</i>
        <img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="">
        <span>Caption of Navigation Item</span>
      </li>
    </ul>
  </li>
</ul>

jsFiddle