如何在有序列表中显示文本和图片？

Question

我需要创建一个有序列表，其中包含文本和图片。

即

为此，我将文本和图像放在表格中。

<ol>
    <li>
        <table>
            <tr>
                <td>
                    Tyrannasaurus
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Tyrannasaurus.png" />
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td>
                    Brontosaurus
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Brontosaurus.png" />
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td>
                    Triceratops
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Triceratops.png" />
                </td>
            </tr>
        </table>
    </li>
</ol>

然而，现在的问题是这些数字实际上并没有与文本对齐 - 数字太高了。

我应该使用更好的方法吗？它似乎不应该那么难。

Answer 1

你可以使用这样的东西：

<ol>
    <li>
        <h3>Animal 1</h3>
        <img src="http://lorempixel.com/400/200/animals/1/" alt="">
    </li>
    <li>
        <h3>Animal 2</h3>
        <img src="http://lorempixel.com/400/200/animals/2/" alt="">
    </li>
    <li>
        <h3>Animal 3</h3>
        <img src="http://lorempixel.com/400/200/animals/3/" alt="">
    </li>
</ol>

上面的代码看起来像这样：

小提琴：http://jsfiddle.net/praveenscience/gxqnbv7r/