expand点击链接或文本向下 [英] expanding Dots pushing link or text down

问题描述

我创建了一个带点的跨线，以填充链接文本和电话号码之间，但我不能得到它，所以如果我有很多点，文本不在下面。问题是在一些不同的brwosers和计算机....会看起来很好，或将推出它的方式。

I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.

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

我尝试在一些浏览器上放少些点，只是看起来不对。

I tried putting less dots buton some browsers it just doesnt look right.

推荐答案

更好的方法是使用定义列表。这将语义上显示您想要的信息，而不需要您输入一串点：

A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:

HTML

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

    <dt>Email</dt>
    <dd>[e-mail]</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;  
}

您可以看到一个例子。

这篇关于expand点击链接或文本向下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！