Convertir una lista desordenada en una tabla de contenidos

hacen referencia a esta violín: http://jsfiddle.net/exGnZ/Convertir una lista desordenada en una tabla de contenidos

Hola, estoy tratando de reproducir una tabla de contenido con una lista desordenada y puntos líder. Lamentablemente, cuando hay una larga lista de contenido, el formato se rompe. ¿Alguien sabe cómo hacer que el Capítulo 2 en la imagen de abajo aparezca en la misma línea que los puntos?

enter image description here

Aquí está el código que tengo en este momento: http://jsfiddle.net/exGnZ/

También estoy pegando aquí:

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

Y el 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; 
    }

Fuente

2012-01-17 Fred

¿Qué tal esto: http://jsfiddle.net/exGnZ/40/

mejor que pude en ese momento no tenía.

Fuente

2012-01-17 17:15:49 Deadlykipper

Gran solución. Lo único que me gustaría poder cambiar es no tener el texto en el lado izquierdo subrayado, pero creo que esto es lo más cercano que podemos obtener con los navegadores actuales ... Escogiendo esto como la respuesta. – Fred

Me di cuenta de eso. Si tuviera un poco más de tiempo, estoy seguro de que podría llegar a algo. Poco ocupado en este momento sin embargo. Volveré a publicar más tarde si encuentro algo. – Deadlykipper

Oye, un tramo extra (que no es nivel de bloque) resuelve el problema. Un tramo de bloque en línea establecerá el ancho y uno (el tramo de nivel no bloque) se puede utilizar para establecer el fondo blanco. ¡Gracias por tu ayuda! – Fred

Aquí está mi grieta: JSFiddle

El único inconveniente de esta técnica es que requiere un ancho fijo en el lado derecho (100 píxeles, en este caso) para funcionar, pero es una desventaja menor.

Fuente

2012-01-17 17:08:51

Gran solución. Me di cuenta de IE7 necesitaría un truco, aunque para obtener puntos en la misma línea ... – Fred

Voltear la posición de las etiquetas 'span' y' a' en el código arreglaría ese error IE7, sin ningún tipo de hackeos. –

Cuando intenté cambiar el orden, terminé con problemas de diseño en FF ... – Fred

El valor de mis dos peniques es here.

Usé el posicionamiento relativo en lugar de flotadores y agregué un pseudo elemento después de los tramos para evitar la superposición (?) De los enlaces si se reduce el ancho del ul.

Fuente

2012-01-17 19:22:06 magicalex

Convertir una lista desordenada en una tabla de contenidos

Respuesta

Cuestiones relacionadas