php - 什么可能导致此布局问题？

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>';