带有用户定义图标的列表菜单（UL / LI）上的CSS故障

Question

我有一个LI / UL菜单，用户自己存储这些项目。

问题：

1. ICON（图像）左侧/顶部有一个小值（红色/气泡），但未正确定位在子项目上
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