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

一尘不染

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

css

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

例如。

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

我的文字2 -----------------------另一个文字。

如果您发现两个文本都是合理的（或至少我尝试过），可能是计算字符数时遇到的问题，但是字符宽度可能有所不同，那么任何人都知道在Asp.Net，css，jquery或任何其他程序中以编程方式执行此操作的简便方法？

更新资料

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

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

更新资料

........

帕特里克（Patrick）的回答确实很接近该解决方案，但是IE8中没有显示连字符，也许我的评论之一有误解，它应该仅在这些浏览器上才能在IE7，IE8和Firefox上运行。

谢谢大家。

阅读 266

2020-05-16

共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;
}

2020-05-16