How to emulate lists in HTML?

I'm converting a word document into HTML by hand so that it'll look nice when published on the Amazon Kindle. However, I'm having trouble getting the table of contents to look right.

Basically, I want the TOC to look something like what you'd get with an ordered list, but with custom list items:

Table of Contents

Preface: My Example

1. The First Chapter
2. Apples
3. Yadda Yadda...

Epiogue: The End

Appendix

How can I get the "Preface", "Epilogue", and "Appendix" labels to align themselves with the "1", "2" and "3" in the list? How can I get the preface and epilogue titles (i.e., "My Example", and "The End") to align with all the rest of the chapter titles? I realize it probably can't be an actual HTML list tag, but how might I achieve the appearance?

Note - this must render on a Kindle. No javascript or anything fancy.

• EDIT:

I'm sorry if something like this has been aske开发者_运维知识库d before. I can't figure out a concise way to phrase this question, which makes searching for it difficult.

---

I can't say I've had experience formatting HTML specifically for rendering on the Kindle but the follwing basic HTML and CSS should work.

HTML:

<h2>Table of Contents</h2>
<ol id="toc">
    <li class="no">Preface: My Example</li>
    <li value="1">The First Chapter</li>
    <li>Apples</li>
    <li>Yadda Yadda...</li>
    <li class="no">Epilogue: The End</li>
    <li class="no">Appendix</li>
</ol>

CSS:

#toc {margin:0; padding:0; }
#toc li { margin:0 0 .5em 1.25em; }
#toc li.no { margin-left:0; list-style:none; }

Demo: jsfiddle.net/BdfEE

It uses a deprecated value attribute on the second <li> but if it works then great. If not you can try the CSS method of changing the numbering of an ordered list, however I'd imagine this possibly not working, depending on Kindle's CSS capabilities.

---

put them in an unordered list with no bullet marker then they should align with the other list

<ul style='list-style-type: none;'>