Girando una lista non ordinata in una tabella di contenuti

Question

fanno riferimento a questo violino: http://jsfiddle.net/exGnZ/

Ciao, sto cercando di riprodurre una tabella dei contenuti, con una lista non ordinata e puntini leader. Sfortunatamente, quando c'è una lunga fila di contenuti, la formattazione si interrompe. Qualcuno sa come ottenere il Capitolo 2 nell'immagine qui sotto per apparire sulla stessa riga dei punti?

Ecco il codice che ho in questo momento: http://jsfiddle.net/exGnZ/

Sto anche incollandolo qui:

<div> 
    <ul id="toc"> 
    <li><span>Introduction</span> <a href="#">Chapter 1</a></li> 
    <li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> <a href="#">Chapter 2</a></li> 
    <li><span>Sun breaks</span> <a href="#">Chapter 3</a></li> 
    <li><span>Lost and confused</span> <a href="#">Chapter 4</a></li> 
    <li><span>The pot of gold</span> <a href="#">Chapter 5</a></li> 
    <li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li> 
    </ul></div> 

E il CSS:

div {padding:10px;} 
    #toc { 
     list-style: none; 
     margin-bottom: 20px; 
    } 
    #toc li { 
     background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left; 
     overflow: hidden; 
     padding-bottom: 2px; 
    } 
    #toc a, 
    #toc span { 
     display: inline-block; 
     background: #fff; 
     position: relative; 
     bottom: -4px; 
    } 
    #toc a { 
     float: right; 
     padding: 0 0 3px 2px; 
    } 
    #toc span { 
     float: left; 
     padding: 0 2px 3px 0; 
    } 

Answer 1

ne dite di questo: http://jsfiddle.net/exGnZ/40/

meglio che ho potuto gestire nel tempo che ho avuto.

Answer 2

Ecco il mio tentativo: JSFiddle

L'unico lato negativo di questa tecnica è che richiede una larghezza fissa sul lato destro (100 pixel, in questo caso) per funzionare, ma è un compromesso minore.

Answer 3

Il mio valore di due penny è here.

Ho usato il posizionamento relativo anziché i float e aggiunto uno pseudo elemento dopo gli span per evitare la sovrapposizione (?) Dei collegamenti se la larghezza dell'ul è ridotta.