Question

  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>
      <dt><span>Phone</span></dt>
      <dd>123-4567</dd>

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

我正在试着这样做，所以我的文字中间可以有一条虚线，但我的点宽度有问题，因为某些原因，文字会在点之后继续到下一行。

你可以看到我的意思

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

Answer 1

也许是这样的：http://jsfiddle.net/dwCmg/1

不完全符合您的期望（不同的标记），但它似乎适用于所有主流浏览器。这个想法基本上是使用表格：

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%;}

Answer 2

这是使用dd元素上的负边距顶部来解决问题的一种方法。

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

Answer 3

正如所说的那样，你将dd推向了下一行，让dt的宽度达到100％......

如果让左浮动的dt具有正常的宽度，而只是让dd具有100％的宽度和背景，那么它应该可以正常工作：
http://jsfiddle.net/aneves_sw/meKhe/

你只需要获得一个新图像，每2像素1像素，右边有一个点和一个白色空间，
所以你不需要玩背景位置。

在虚线跨度上工作，我无法弄清楚如何使它成为同一条线

3 个答案: