可能导致此布局问题的原因是什么？

Question

当创建5个（最大）条目时，布局按预期工作，如下所示：

但是，如果条目较少，则布局会全部搞砸：

可能导致此问题的原因是什么？生成每个条目的PHP代码如下：

echo '<div class="st_decor sk_decor rounded" style="clear:both">
',$v['name'],' of ',$l['serv_'.$serv[$v['server']]],'
<a style="float:right;margin-left:1em" href="delete/character/',$v['id'],'/">
<img src="img/x.png" alt="',$l['delete'],'"></a></div>';

使用的CSS类是：

.rounded {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px}

.st_decor{
    border-left-style:groove;
    border-width: 0 0 0 2px;
    margin-left: 15px;
    font-size:10px;
    padding: 3px}

.sk_decor{border-left-color:#ffdf8c}    
.sk_decor:hover{background-color:#333333;}

非常感谢任何帮助。

Answer 1

我找到了一个解决方案：图片只需要放在文本之前：

echo '<ul class="st_decor sk_decor rounded" style="clear:both">
<a style="float:right;margin-left:1em" href="delete/character/',$v['id'],'/">
<img src="img/x.png" alt="',$l['delete'],'"></a>
',$v['name'],' of ',$l['serv_'.$serv[$v['server']]],'
</ul>';