javascript - 用点或连字符填充标签之间的可用空间

Question

我有一个包含标签的页面，标签包含在一个 div 中，标签有一个变量，我想用字符、点或“-”填充两者之间的空格。

例如。

我的标签文本 1 ---------- 这里有一些文本。

My text 2 ---------------------- Another Text.

如果您注意到两个文本都是合理的(或者至少我尝试过)，可能是计算字符的问题，但字符可以有不同的宽度，任何人都知道在 Asp.Net、css、jquery 中以编程方式执行此操作的干净方法或者别的什么？

更新

................

有人在答案中建议将两个标签与 css 对齐，但我认为中间的字符会遇到同样的问题，当然这可能是另一个标签。有什么想法吗？

更新

................................

Patrick 的回答非常接近解决方案，但现在 IE8 中没有显示连字符，也许我的评论中有一个理解错误，它应该适用于 IE7、IE8 和 Firefox，只有这些浏览器。

谢谢大家。

Answer 1

试试这个: http://jsfiddle.net/FpRp2/4/ (已更新，现在可以在 ie7 中使用)

@Marcel 给出的使用虚线边框而不是文本连字符的解决方案解决了 IE7 的最后一个问题。

(请注意，到目前为止，我只在 Safari、Firefox 和 Chrome 中进行过测试。)

编辑:IE8 有效。 正在为 IE7 修复。

HTML

<div class='outer'>
    <div class='container'>
        <div class='filler'></div>
        <span class='label'>some label</span>
        <span class='text'>some text</span>
    </div>
    <br>
    <div class='container'>
        <div class='filler'></div>
        <span class='label'>some other label</span>
        <span class='text'>some other text</span>
    </div>
</div>

CSS

.outer {
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
    clip: auto;
    overflow: hidden;
}
.container {
    position: relative;
    text-align: right;
    white-space: nowrap;
}
.filler {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px dashed #333;
    height: 50%;
}
.label {
    background: white;
    float: left;
    margin-right: 20px;
    padding-right: 4px;
    position: relative;
}
.text {
    background: white;
    padding-left: 4px;
    position: relative;
}