css - 在每个li文本

Question

在每个列表元素的顶部插入小图像的最佳方法是什么？像这样：

感谢您的帮助！

我试过这个，但它看起来不像图像！

.top-menu-ul {
    float: right;
    list-style: none;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
}

.top-menu-ul li {
    float: right;
    margin: 50px 20px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
</ul>

Answer 1

元素之间有一个简单的<br/>，有些居中应该这样做：

.top-menu-ul {
  list-style: none;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
}

.top-menu-ul li {
  border-right: 1px solid #dddddd;
  float: left;
  margin-right: 10px;
  padding: 10px;
  text-align:center;
}

.top-menu-ul > :first-child
{
  border-left:solid 1px #dddddd;
}

.top-menu-ul li img {
  margin-bottom: 5px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
</ul>