Working on dotted line span and I can't figure out how to make it same line

  dl {
     width: 480px;  
  }

  dt {
     float: left;
     clear: right;
     width: 100%;   
     background: url(http://galeon.sourceforge.net/twiki/pub/TWiki/TWikiDocGraphics/dot_lr.gif) repeat-x 0 180%;   
  }

  dt span {
     background: #fff;   
  }

  dd {
     float: right;
     width: auto;   
  }


  <dl>
     开发者_StackOverflow社区 <dt><span>Phone</span></dt>
      <dd>123-4567</dd>

      <dt><span>Email</span></dt>
      <dd>info@email.com</dd>    
  </dl>

I am trying to make it so i can have a dotted line span through the middle of my text but i am having trouble with the width of the dots, for some reason the text keeps going to the next line after the dots.

You can see what i mean here

http://jsfiddle.net/MUqYn/16/

Maybe something like this: http://jsfiddle.net/dwCmg/1

Not exactly what you hoped for (different markup), but it seems to work well on all major browsers. The idea is basically to use tables:

HTML:

<div class='definition'>
    <span class='name'>Phone</span>
    <span class='dots'></span>
    <span class='value'>123-4567</span>
</div>

CSS:

.definition {display:table; width:480px;}
.definition > span {display:table-cell; white-space:nowrap;}
.definition > span.dots {width:100%; background: url(http://galeon.sourceforge.net/twiki/pub/TWiki/TWikiDocGraphics/dot_lr.gif) repeat-x 0 180%;}

Here is one way to approach the problem using a negative margin-top on the dd elements.

http://jsfiddle.net/newspark/KvpCM/1/

As was said, you are pushing the dd to the next line by making the dt have 100% width...

If you let the left-floated dt have its normal width and just make the dd have the 100% width and background instead, it should work fine:
http://jsfiddle.net/aneves_sw/meKhe/

You just need to get a new image, 1px per 2px, with a dot and a white-space to its right,
so that you don't need to juggle with background-position.