前後のHTMLテキスト（接頭辞/接尾辞）入力フィールド

同じ行の入力フィールドの前後にHTMLテキストを表示する必要があります。接頭辞と接尾辞は実行時に追加され、そこに存在してもいなくてもよい。私は試してみました。ここで私は今持っているものである：ここでは前後のHTMLテキスト（接頭辞/接尾辞）入力フィールド

は、値が時々存在しないことを思い出して（私が達成しようとしているものですので、私は、彼らが存在しないとき、テキスト入力がそのスペースを回復したいと思います：ここでは

私の現在のコードは（私はそれを読みやすくするために、いくつかのクラスDEFSを切り取った）です：

<div> 
    <div>Prefix and Suffix</div> 
    <div class="row"> 
     <span style="display:inline-block">Test<input type="text" class="input">Dollars</span> 
    </div> 
</div>

私はテーブルを使用しないソリューション（単にdiv）を望んでいますが、これが唯一の方法であればそれも可能です。

出典

2017-12-06 Stephen McCormick

貼り付けを使用すると、私たちはそれがこの動作を引き起こしている表示されないいくつかのCSS /スタイリングがある推測しています....後何であったかを与えましたか？入力の幅を100％に設定すると、今のもののように見えます。あなたが幅のスタイリングを削除するだけであれば、あなたが望むように見えます。 –

ありがとう、私はコードを明確にするためにいくつかのスタイリングを削除しました。私はそれを見てみましょう... –

フレックスを使用すると、私にとってうまくいくようです。試してみる価値があるかもしれません。 JSBinにHTMLとJSFiddle両方

<div style="display:flex;"> 
     <div>Test&nbsp;</div> 
     <input type="text"> 
     <div>&nbsp;Dollars</div> 
    </div>

出典

2017-12-06 18:54:22

ありがとう私はそれを試してみましょう。いくつかのスタイルを削除すると、すべて同じ行になりますが、私は左に接頭辞、右に接尾辞、残りの空白を埋めるために入力が必要です。 –

完璧なソリューション！入力のために必要なスペースが埋まっています。接頭辞または接尾辞がない場合にも機能します。 "align-item：center"といくつかのマージンを追加するだけでした。 –

前後のHTMLテキスト（接頭辞/接尾辞）入力フィールド

答えて

関連する問題