工作虛線跨度，我不知道如何使它同一行

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>[email protected]</dd>  
    </dl>

我想讓它，所以我可以有一個虛線跨越我的文字中間，但我有麻煩點的寬度，由於某些原因，文本繼續到點之後的下一行。工作虛線跨度，我不知道如何使它同一行

你可以明白我的意思在這裏

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

來源

2011-09-28 mystycs

dt元素設置爲100％寬度，dd元素會去哪裏？ – JohnFx

我可以做到這一點，直到文本，並停在那裏？ – mystycs

虛線也應該低於數值（'

'），還是在它之前停下來？ – Kobi

也許是這樣的：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%;}

來源

2011-09-28 22:58:56 Kobi

如果它工作我開心！讓我試着實現這個！ – mystycs

你也可以用border-bottom替換背景屬性：thin dotted;並避免需要圖像。 – JohnFx

@John - 優點！當我第一次看到這個問題時，我確實考慮過這個問題，但是完全忘記了它......謝謝！這是一個以點作爲邊界的版本：http://jsfiddle.net/dwCmg/4/。我們可以添加另一個元素來控制線的位置，因此它不會太低。 – Kobi