0

labelタグ (左揃え) とタグ (右揃え)の間にinput点または線を配置して、ユーザーが正しい入力を選択できるようにすることは可能ですか?

<label for="firstname">Firstname: </label><input type="text" size="55" id="firstname" name="firstname" value="">
4

3 に答える 3

3

これは、CSS::afterセレクターを使用する単純なケースです。

このセレクターを使用すると、要素の後に追加のコンテンツを挿入できます。この場合、label要素の後に大量のドットを挿入したいと考えています。したがって、これを行うだけです。

label::after {
    content:'....................................................................................................................';
}

明らかに、これだけではうまくいきません。あらゆる種類のワードラップの問題が発生したり、入力ボックスの位置がずれたりするためです。そのため、それらすべてに対処する必要がありますが、それは比較的些細なことです。

と を使用overflow:hiddenしwhite-space:nowrapて余分なドットを非表示にし、ワードラップを防ぎます。次に、CSSpositionを使用してinputフィールドが右に固定されるようにします。

それほど多くのドットが必要な場合とそうでない場合がありますが、余分なドットが隠されているため、必要になる最大数をカバーするのに十分な量がある限り、実際には問題になりません。

上記のすべてを行うフィドルを作成しました。これは完全なソリューションになるはずです：http://jsfiddle.net/FU66q/1/

それが役立つことを願っています。

于 2013-11-06T11:11:00.637 に答える
0

次のようなものを使用して、行の背景色を交互に変更するのはどうですか

label:nth-child(even) {
    background-color: #EEE;
}

おそらく、入力にも何かがあるので、それらはずっと続きます（または、ラベル/入力ペア全体を独自のコンテナに入れます）。

于 2013-11-06T10:46:16.647 に答える
0

要素を行に配置して、別の行を強調表示することもできます。

サンプル

http://jsfiddle.net/Zrh7Q/2/

その他のアイデア/サンプル

http://jsfiddle.net/Zrh7Q/

http://jsfiddle.net/Zrh7Q/1/

HTML

<label for="firstname">Firstname: </label>
<span class="dots"></span>
<input type="text" size="55" id="firstname" name="firstname" value="">
<br />
<label for="lastname">Lastname: </label>
<span class="dots">&nbsp;</span>
<input type="text" size="55" id="lastname" name="lastname" value="">

CSS .dots { border-bottom: 1px ドット #000;
幅: 25%; 表示: インラインブロック; }

于 2013-11-06T10:47:13.040 に答える