html - 扩展点向下推链接或文本

Question

我创建了一 strip 点的跨线来填充链接文本和电话号码之间的内容，但我无法得到它，这样如果我有很多点，文本就不会在下面。问题是在一些不同的浏览器和计算机上......看起来很好，或者它会把它推开。我将如何着手制作它，以便点......可以跨越并且文本不会低于其应有的宽度。

<style type="text/css">
#contactInfo {
    margin:auto;
    width: 480px;
    height: auto;
}
</style>
<div id="contactInfo">
  <p>Email: .........................................................................<a    href="mailto:info@hereistheemail.com" class="redBold">info@hereistheemail.com</a></p>
  <p>Phone: ..................................................................................<span    class="redBold">888-888-8888</span></p>
</div>

我试着少放一些点，但在某些浏览器上它看起来不对。

Answer 1

做你想做的事的更好方法是使用 definition list 。这将在语义上呈现您想要的信息，而不需要您输入一堆点:

HTML

<dl>
    <dt>Phone</dt>
    <dd>123-4567</dd>

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

CSS

dl {
   /* Adjust as needed.  Note that dl width + dt width must not be greater */
   width: 300px;  
}

dt {
   /* The definition term with a dotted background image */
   float: left;
   clear: right;
   width: 100px;  
   background: url(1-pixel-dot.gif) repeat-x bottom left;  
}

dd {
   /* The definition description */
   float: right;
   width: 200px;  
}

您可以在此处查看它的 an example。