html - Adding a dotted line spacer/infill with CSS -

html - Adding a dotted line spacer/infill with CSS -

i working on restaurant website. design calls typical dotted line infill between menu item , price. have been scouring net , messing hr or , can't seem find ways css. found couple of other solutions on here work great if have solid color background, on site uses background image , solutions wouldn't work.

example: menu style "...." - fill in periods has solution, sets background colors white of menu item , cost hide dotted lines behind them, page building has background image solid color backgrounds bad.

i have tried using kinds of combinations of table-row/table-cell or other type of css display attributes , width settings on elements, no dice.

here false sample markup:

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

i have been trying work using "dots" class element bottom border fill in gap, nil seek works. set bottom border on li element way across bottom of each row, not designer wants. can think of doing in javascript lastly resort, wanted see if guys had ideas. or, can utilize tables, wanted avoid well.

thanks!

i go this:

example fiddle

it uses dotted border on .dots element , shifts pixels top.

class="lang-css prettyprint-override">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 - dont need float elements. solution uses display:table-cell won't work in old ies (<ie8). depending on background, utilize li-border solution , replace solid colors on span-elements background-image itself.

html css