我有一个带有标签的页面,这些标签包含在 div 中,标签有一个变量,我想用字符、点或“-”填充两者之间的空格。
例如。
我的标签文本 1 ----------- 这里有一些文本。
我的文字2 ---------------------- 另一篇文字。
如果您发现两个文本都是合理的(或者至少我尝试过),则可能是字符计数问题,但字符可以具有不同的宽度,任何人都知道在 Asp.Net、css、jquery 或其他任何内容中以编程方式执行此操作的干净方法?
Update
......................
有人建议在答案中将两个标签与 css 对齐,但我认为中间的字符我也会遇到同样的问题,这当然可以是另一个标签。有什么想法吗?
Update
......................
Patrick 的回答非常接近解决方案,但现在 IE8 中不显示连字符,也许我的评论之一中存在一个未理解的地方,它应该适用于 IE7、IE8 和 Firefox,只有这些浏览器。
谢谢大家。
尝试这个: http://jsfiddle.net/FpRp2/4/ http://jsfiddle.net/FpRp2/4/ (已更新,现在可以在 ie7 中使用)
@Marcel 给出的解决方案是使用虚线边框而不是文本连字符解决了 IE7 的最终问题。
(请注意,到目前为止我只在 Safari、Firefox 和 Chrome 中进行了测试。)
EDIT: IE8 works. Working on a fix for IE7.
.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;
}
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)