div に含まれるラベルのあるページがあり、ラベルには変数があり、その間のスペースを文字、ドット、または「-」で埋めたいと考えています。
例えば。
私のラベルテキスト 1 ----------- ここにテキストを入力してください。
私のテキスト 2 ----------------------- 別のテキスト。
両方のテキストが両端揃えになっていることに気付いた場合 (少なくとも私はそうしようとしています)、文字数を数える問題である可能性がありますが、文字の幅は異なる場合があります。Asp.Net、CSS、jQuery などでプログラム的にこれを実行する簡単な方法を知っている人はいませんか?
アップデート
................
回答で、両方のラベルを CSS で揃えることを勧める人がいましたが、中央の文字でも同じ問題が発生すると思います。もちろん、これは別のラベルである可能性があります。何かご意見はありますか?
アップデート
.................
Patrick からの回答は解決策に非常に近いですが、現在 IE8 ではハイフンが表示されません。おそらく私のコメントの 1 つに誤解があるのでしょうが、IE7、IE8、Firefox でのみ動作するはずです。これらのブラウザーでのみ動作します。
みんなありがとう。
ベストアンサー1
これを試して： http://jsfiddle.net/FpRp2/4/ (更新済み、IE7 でも動作するようになりました)
@Marcel が提案した、テキストのハイフンの代わりに破線の境界線を使用するという解決策により、IE7 の最終的な問題が解決されました。
(注: これまでのところ、Safari、Firefox、Chrome でのみテストしました。)
編集: IE8 は動作します。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>