0

我只想为此修复两侧 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>
4

2 回答 2

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>

等等。见小提琴。

于 2013-09-13T14:18:51.050 回答
0

工作演示

尝试这个

我改变了你的CSS

css

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%;
}

希望这会有所帮助，谢谢

于 2013-09-13T10:23:42.950 回答