Jquery 固定两侧li和虚线的最小和最大宽度自动调整

我只是想修复的最小和最大宽度的两侧李列为这个，需要他们之间的虚线列自动调整我已经尝试了下面的代码

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

但结果并不接近

谢谢你

*{边距：0；填充：0；}
html{颜色：黑色；填充：2em；字体：16px/1.2“Lucida Sans”，“Lucida Sans Unicode”，“Lucida Grande”，无衬线；}
html，#mainhead2li，span{背景：#f7f7ee；}
#main，caption{margin:0auto；}/*应用程序到lie caption元素解决了Mozilla错误297676*/
#主{边界折叠：折叠；}
标题，li，li{填充：0.1em 0；}
标题{文本对齐：居中；字体大小：粗体；}
#mainhead2 ul{背景：url（“http://www.momsformarijuana.org/blogs/skins/mystique/images/dot.gif）0 78%重复-x；}
#mainhead2 li，li+li{文本对齐：右；}
#mainhead2 li{右侧填充：0.4em；字体重量：正常；}
li+li{左填充：0.4em；}
引用{font-style:normal；}
span{填充：0.2em；空白：pre；}
Dragonseye目录


序言
一,


1
初秋的加利尔堡
四,


2
加利尔堡酒店
49


3
特尔加韦尔晚秋酒店
六十四


4
泰尔加韦尔利学院
87


5
韦林兵营和比乌拉堡
104

工作 试试这个

我已经改变了你的css

css

---

希望这有帮助，谢谢你这应该作为一个列表而不是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>

开场白
1.


初秋在堡垒的聚集
4.


在堡垒集合
49

---

等等。请参阅。

您是否正在寻找与所附图像相同的输出？（我没有否定）还有，你在找类似的东西吗？是的，需要相同的输出..可能重复的，@Parm at给出的答案，我想他/她在转换Ul Li中的表元素后也需要相同的结果..谢谢，但我还需要两个固定值之间的虚线

body {
    width:100%;
}
ul {
    background: #f7f7ee;
    display:table;
    width:80%;
}
li {
    display:table-cell;
    text-align:left;
}
li:nth-last-child(1) {
    text-align:right;
}
ul:first-child li {
    padding:2px;
}
li:nth-last-child(3) {
 width:5%;
}

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