Question

我创建了一个带有点的跨区线，以填充链接和电话号码之间的文本，但我无法得到它，以便如果我有许多点，文本不会在下面。问题出现在一些不同的brwosers和计算机上....看起来很好或者它会把它推开。怎么会这样做，所以点......将跨越，文本不会低于它应该的宽度。

<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。

Answer 2

您必须尝试为此创建一种解决方法，而不仅仅是使用字符。

某些解决方案可能会使用在某个div / span中重复的背景图像：http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html

或者您可以考虑在单词电子邮件和电子邮件地址之间创建一个范围，并尝试创建一个border-bottom: dotted 1px black或类似的东西。或者可以将信息放在表格中，并创建一个带有边框底部的td。

另一个解决方案是检查一些javascript所需的点数，但这绝对不是很强大，并且不能证明 - 调整你的内容。

所以，要有创意解决方案。用字符填充行可能不是可行的方法。

Answer 3

试试这个：

#contactInfo {
  [ your other styles ]
  white-space: nowrap;
}

Answer 4

另一种方法是使用position:absolute

Demo

#contactInfo p
{
    position:relative;
}

#contactInfo span,#contactInfo a
{
    position:absolute;
    right:0px;
}

扩展点推送链接或文本

4 个答案:

Demo

Edit（已清理版本）