html - 如何在没有 "phantom"行的情况下创建包含两列内容的列表项？

Question

我正在尝试创建一个列表，其中每一行都有一个指示该行的数字(例如，“1”代表第一行，“2”代表第二行，等等)，一个或多个图标(例如，删除、编辑等)紧接在号码的右侧，然后是后面的文本 block 。参见 table at the bottom of this fiddle为了说明这一点。

让我感到困惑的部分是图标后的文字环绕。我希望它在视觉上是三列(一列用于数字，一列用于图标，一列用于文本)，这样当文本换行时，它不会在图标下方换行。

我最初尝试了两个 div block 作为 li 内容，两个 div 都是左浮动的并且设置了明确的宽度，但我发现列表项中出现了一个“幻影”空行。请参阅下面和 fiddle 中的列表项 #1。

如果我不对列表项应用 clearfix，则“幻影”行消失，但列表项标签(即数字)出现在列表项内容之后，并且列表项上的背景色不适用于所有 child ——这是我想要的。请参阅下面和 fiddle 中的列表项 #2。

接下来我想尝试的是将列表项的全部内容放在一个包含两列的表格中，但这会导致与 #1 相同的行为。请参阅下面和 fiddle 中的列表项 #3。

我可以使用三列表来完成此操作(如我的 fiddle 所示)，但我想利用浏览器自动为列表中的元素编号的功能。这样我就可以通过 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>

Answer 1

尝试在 ol 中使用列表样式属性作为

list-style: inside decimal;