Agregando una línea de puntos spacer/infill con CSS

Question

Estoy trabajando en un sitio web de restaurante. El diseño requiere el relleno de línea de puntos típico entre un elemento de menú y el precio. He estado rastreando la red y jugando con ella durante una hora más o menos y parece que no puedo encontrar ninguna buena manera de hacerlo con solo CSS. Encontré un par de otras soluciones aquí que funcionan muy bien si tienes un fondo de color sólido, sin embargo, en este sitio utiliza una imagen de fondo y esas soluciones no funcionarían.

Ejemplo: Menu style "...." - fill in with periods tiene una buena solución, pero establece los colores de fondo en blanco del elemento del menú y el precio para ocultar las líneas punteadas detrás de ellos, pero la página que estoy construyendo tiene una imagen de fondo para que cualquier fondo de color sólido Se ve mal.

He intentado utilizar todo tipo de combinaciones de tabla-fila/tabla-celda o cualquier otro tipo de atributos de pantalla CSS y ajustes de ancho en los elementos, pero no dados.

Aquí es un poco de falsa marcado de la muestra:

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li> 
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li> 
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li> 
</ul> 

he estado tratando de conseguir que esto funcione mediante el uso de la "puntos" elemento de la clase con un borde inferior para llenar el vacío, pero nada que intento obras . También puse un borde inferior en el elemento LI a lo largo de la parte inferior de cada fila, pero eso no es lo que quiere el diseñador. Solo puedo pensar en hacerlo en javascript como último recurso, pero quería ver si ustedes tenían alguna idea. O bien, puedo usar tablas, pero realmente quería evitar eso también.

Gracias!

Answer 1

Me gustaría ir con algo como esto :

Example Fiddle

Se utiliza el borde de puntos en el elemento de .dots y lo desplaza algunos píxeles a la parte superior.

ul li { 
    display:table-row; 
    width:15em; 
} 
ul li span{ 
    display:table-cell; 
} 
.dots{ 
    min-width:10em; 
    position:relative; 
    bottom:4px; 
border-bottom:1px dotted #777; 
} 

Nice sideeffect - no necesitas flotar los elementos. Sin embargo, esta solución usa display:table-cell, por lo que no funcionará en IE antiguos (< IE8).
Según el fondo, puede usar li-border solution y reemplazar los colores sólidos en los elementos de tramo con la imagen de fondo misma.

Answer 2

que se puede lograr mediante el uso de listas de definición (fiddle):

HTML:

<div id="wrap"> 
    <div class="inner"> 
     <dl> 
      <dt>$2.89</dt> 
      <dd><em>Lorem ipsum dolor sit amet </em></dd> 
     </dl> 
     <dl> 
      <dt>$21.89</dt> 
      <dd><em>In porta nisl id nisl varius ullamcorper</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd> 
     </dl> 
     <dl> 
      <dt>$8.99</dt> 
      <dd><em>Donec sed felis sit amet risus</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$7.55</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$6.50</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$2.50</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$21.50</dt> 
      <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd> 
     </dl> 
    </div> 
</div> 

CSS:

* {margin:0;padding:0} 
h1,h2{padding:10px 20px 0} 
#wrap{ 
    width:500px; 
    border:1px solid #eff2df; 
    margin:20px 20px; 
    background:#809900; 
} 
* html #wrap {width:502px;w\idth:500px;} 
#wrap .inner{ 
    padding:20px 40px; 
    border:1px solid #4c7300; 
    position:relative; 
    left:-2px; 
    top:-2px; 
    background:#eff2df; 
    color:#4c7300; 
    width:418px; 
} 
* html #wrap .inner{width:500px;w\idth:418px;} 
#wrap dl{ 
    position:relative; 
    width:100%; 
    border-bottom:1px solid #eff2df; 
} 
#wrap dd{ 
    line-height:1.2em; 
    position:relative; 
    padding:0 5em 0 0; 
    text-align:left; 
    border-bottom:1px dotted #000; 
    clear:both; 
    margin:0 0 .4em 0; 
    min-height:0; 
} 
* html #wrap dd{ 
    border:none; 
    background: url(images/dotted-leader.gif) repeat-x left bottom; 
    height:1%; 
} 
#wrap dt{ 
    background:#eff2df; 
    padding:1px 0 1px 5px; 
    color:#809900; 
    position:absolute; 
    bottom:0px; 
    right:-1px; 
    z-index:99; 
} 
#wrap dd em{ 
    margin:0 ; 
    position:relative; 
    top:.25em; 
    padding:0 5px 0 0; 
    background:#eff2df; 
} 

Reference Link