CSS：相对于浮动的“li”定位`img`

Question

我正在使用以下方式显示个人资料列表：

 <ul>
 <li>
    <p>Score: <span class="score">33</span> | Depuis: 1333</p>
    <p class="username">
         <a href="...">
              <img src="..." alt="" class="avatar"/>
         </a>
    </p>

 </li>
 </ul>

并且定位是浮动的：

 ul { list-style:none; }
 ul li {width:450px; margin-top:20px; padding:10px; float:left; }
 ul li img.avatar { position:relative; top:0px; left:50px; width:55px; height:55px;}

但是这样，图像的位置与li无关。 如何相对于li定位图像？

Answer 1

您需要li position: relative，fixed或absolute使其成为相对定位的孩子的“起点”。