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 個の個別のリストではなく、1 つのリストとして実装する必要があります...いくつかのスパンを追加するだけです。

<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 に答える