一個ずつ<a>タグでくくるテキストリンクではなくて、たぶんリスト＋ｃｓｓで作るべきなんだろう、と思った。
で、うちのサイトでためしに作ってみた。
四角のボーダーで囲ってあるリンクがリストタグ<li>を横並びにさせたもの。
上の、普通のテキストリンクとの違いは
ボーダー内をタッチ、あるいはクリックすることでリンクになるってだけだけど、
上のちっこい数字をiphoneで指タッチする難しさを考えると、妥当かな、と思うんだけどどうでしょう？（そもそも目次の字が小さすぎる、という批判は甘んじて受けるっ）
【追記】
iphone用のｃｓｓもいじりにいじって、何とかこんなふうに表示されるようになった。
色がかわってるのは、visitedの部分。わかりやすいかなーって思って。
２の、テキストリンクのところだけはさすがにちょっとめんどくさくてhtml書き換えていません。
角丸とシャドウを使っています。
htmlは以下↓
<div id="mokuji">
<ul>
<li><a href="short/tuki_v1.html">１</a></li>
<li><a href="short/tuki_v2.html">２</a></li>
</ul>
</div>
ｃｓｓは参考サイトからいただいてきたのでそっちをみてください。
いっぱい書き換えてるので、そのへんは臨機応変にｗ
（参考）
http://desperadoes.biz/ ｃｓｓによるリストタグサンプルいろいろ（横並び）
