如何在没有“幻像”行的情况下创建包含两列内容的列表项？

我正在尝试创建一个列表，其中每行都有一个表示行的数字（例如，第一行为"1"，第二行为"2"等），一个或多个图标（例如，删除，编辑等）紧靠数字的右边，然后是文本块 . 有关此说明，请参见table at the bottom of this fiddle .

绊倒我的部分是在图标之后包裹文本 . 我希望它在视觉上是三列（一列用于数字，一列用于图标，一列用于文本），因此当文本换行时，它不会包裹在图标下方 .

我最初尝试了两个div块作为li内容，两个div左浮动并设置了显式宽度，但我发现的是“幻像”空行然后出现在列表项中 . 请参阅下面的列表项＃1和小提琴 .

如果我没有对列表项应用clearfix，则“幻像”行消失，但列表项标签（即数字）出现在列表项内容之后，列表项上的背景颜色不是适用于所有孩子 - 我想要的东西 . 请参阅下面的列表项目＃2和小提琴 .

我想要尝试的下一件事是将列表项的全部内容放在一个双列表中，但这会产生与＃1相同的行为 . 请参阅下面的列表项目＃3和小提琴 .

我可以用一个三列表来完成这个（如我的小提琴所示），但我想利用浏览器的功能自动将列表中的元素编号 . 这样我就可以通过JavaScript插入和删除li元素，而不必担心手动重新编号 . 如果我使用了表格，我需要在每一行上手动插入适当的数字，并在表格中添加和删除项目时跟踪它 .

以下是一些示例代码，以及link to the fiddle for this code .

#some-list {
    width: 200px;
}

#some-list li{
    list-style-type: decimal;
    background-color: #FAFAD2;
    clear: both;
    margin-bottom: 15px;
}
#some-list li div {
    margin: 2px;
    padding: 2px;
}

.row-icons{
    float: left;
    width: 30px;
}
.row-title {
    float: left;
    width: 150px;
}

.visual-example {
    width: 250px;
    border-collapse: collapse;
}

.visual-example td {
    vertical-align: top;
}

.icons-cell, .row-title-cell {
    background-color: #FAFAD2;
}
.icons-cell {
    width: 30px;
}

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}

<ol id='some-list'>
   <li class='container'>
       <div class='row-icons'>
           <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/delete.gif' alt='delete' />
           <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/pencil.gif' alt='edit' />
       </div>
       <div class='row-title'>A lengthy description of this row, it doesn't quite fit on one line.  Notice the "phantom" line above this text.</div>
    </li>

   <li>
       <div class='row-icons'>
           <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/delete.gif' alt='delete' />
           <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/pencil.gif' alt='edit' />
       </div>
       <div class='row-title'>A lengthy description of this row, it doesn't quite fit on one line. No clearfix, and notice the rendering of the number looks bad, and the background color is only applied to the first line.</div>
    </li>

   <li>
       <table><tr>
           <td>
               <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/delete.gif' alt='delete' />
               <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/pencil.gif' alt='edit' />
           </td>
           <td>
               A lengthy description of this row, it doesn't quite fit on one line.  Same problem as #1, although no clearfix and no floating applied.
           </td>
       </tr></table>
    </li>
</ol>


<p style='clear: both; padding-top: 30px;'>This is what I'm trying to accomplish</p>
<table class='visual-example'>
    <tr>
        <td class='list-style-type-cell'>1</td>
        <td class='icons-cell'>
            <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/delete.gif' alt='delete' />
            <img src='https://cdn.nexternal.com/Shared/StoreFront/Images/pencil.gif' alt='edit' />
        </td>
        <td class='row-title-cell'>
            A lengthy description of this row, it doesn't quite fit on one line.
        </td>
    </tr>
</table>