Urbycoz Urbycoz - 1 year ago 29
HTML Question

How can I show text and a picture in an ordered list?

I need to create an ordered list, which has text and pictures.

i.e.

enter image description here

To do this, I have put the text and images in tables.

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


However, the problem now is that the numbers don't actually line up with the text- the numbers are too high.

Is there a better method I should be using? It doesn't seem like it should be so hard.

Answer Source

You can just use something like this:

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

The above code looks this way:

Fiddle: http://jsfiddle.net/praveenscience/gxqnbv7r/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download