jquery - 修复两侧li和虚线自动调整的最小和最大宽度

Question

我只想为此修复两侧 li Col 的最小和最大宽度，并且需要在它们之间设置虚线 col auto adjust 我试过下面的代码。

例如，如图所示。红色 block 需要固定最小和最大宽度，虚线需要自动调整。

但结果还差得远。

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>

Answer 1

这应该作为一个列表而不是 17 个单独的列表来实现...只需添加一些跨度即可。

<ol>
 <li value="0">
  <span class="l">Prologue</span>
  <span class="r">1</span>
 </li>
 <li>
  <span class="l">Early Autumn at Fort’s Gather</span>
  <span class="r">4</span>
 </li>
 <li>
  <span class="l">Gather at Fort</span>
  <span class="r">49</span>
 </li>

等等。参见 fiddle .