このために両側のli Colの最小幅と最大幅を修正したいだけで、それらの間に点線が必要です。col自動調整私は以下のコードを試しました。
たとえば、この画像に見られるように。赤いブロックは最小幅と最大幅で固定する必要があり、ドットは自動調整する必要があります。
しかし、結果は近くありません。
http://jsfiddle.net/DjzzK/ ありがとう
<style>
* { margin: 0; padding: 0; }
html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
html, #mainhead2 li, span { background: #f7f7ee; }
#main, caption { margin: 0 auto; } /* Application to lie caption element addresses Mozilla Bug 297676. */
#main { border-collapse: collapse; }
caption, li, li { padding: 0.1em 0; }
caption { text-align: center; font-weight: bolder; }
#mainhead2 ul { background: url("http://www.momsformarijuana.org/blogs/skins/mystique/images/dot.gif") 0 78% repeat-x; }
#mainhead2 li, li + li { text-align: right; }
#mainhead2 li { padding-right: 0.4em; font-weight: normal; }
li + li { padding-left: 0.4em; }
cite { font-style: normal; }
span { padding: 0 0.2em; white-space: pre; }
</style>
<div id='main'>
<caption><cite>Dragonseye</cite> Table of Contents</caption>
<div id='mainhead2'>
<ul>
<li scope="row"></li>
<li><span>Prologue</span></li>
<li><span>1</span></li>
</ul>
<ul>
<li scope="row">1</li>
<li><span>Early Autumn at Fort’s Galier</span></li>
<li><span>4</span></li>
</ul>
<ul>
<li scope="row">2</li>
<li><span>Galier at Fort</span></li>
<li><span>49</span></li>
</ul>
<ul>
<li scope="row">3</li>
<li><span>Late Fall at Telgar Weyr</span></li>
<li><span>64</span></li>
</ul>
<ul>
<li scope="row">4</li>
<li><span>Telgar Weyr and lie College</span></li>
<li><span>87</span></li>
</ul>
<ul>
<li scope="row">5</li>
<li><span>Weyrling Barracks and Biula Hold</span></li>
<li><span>104</span></li>
</ul>
</div>
</div>