HTML-Text vor und nach (Präfix/Suffix) Eingabefeld

Ich muss in HTML-Text vor und nach einem Eingabefeld, in der gleichen Zeile angezeigt haben. Das Präfix und Suffix werden zur Laufzeit hinzugefügt und sind möglicherweise nicht vorhanden. Ich habe versucht und und Kombinationen dort von. Hier ist, was ich habe jetzt:HTML-Text vor und nach (Präfix/Suffix) Eingabefeld

Hier ist, was ich zu erreichen versuche (wir erinnern uns, dass die Werte manchmal nicht da sein, so möchte ich die Texteingabe, dass der Raum erholen, wenn sie nicht da sind :

Hier ist meine aktuellen Code ist (ich habe einige Klasse defs ausgeschnitten, um es besser lesbar zu machen):

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

Ich würde eine Lösung bevorzugen, die keine Tabellen verwendet (nur div), aber wenn das der einzige Weg ist, es zu tun, sei es so.

Quelle

2017-12-06 Stephen McCormick

Einfügen von HTML in JSBin und JSFiddle gaben beide, was Sie suchten .... Ich vermute, es gibt einige CSS/Styling wir sehen nicht, dass dieses Verhalten verursacht? Wenn ich die Breite der Eingabe auf 100% setze, sieht es so aus, als ob Sie jetzt haben. Wenn ich nur das Breitenstyling entferne, sieht es so aus, wie du es willst. –

Danke, ich habe etwas Styling entfernt, um den Code klarer zu machen. Ich werde mir das ansehen ... –

mit flex scheint für mich gut zu funktionieren. Könnte einen Versuch wert sein.

Quelle

2017-12-06 18:54:22

Danke, ich werde es versuchen. Das Entfernen einiger Stile hat alles in derselben Zeile, aber ich brauche das Präfix auf der linken Seite, das Suffix auf der rechten Seite und die Eingabe, um den Rest des Platzes zu füllen. –

Perfekte Lösung! Gefüllt mit benötigtem Speicherplatz für die Eingabe. Funktioniert auch, wenn Präfix oder Suffix fehlt. Ich musste nur "align-item: center" und einige Ränder hinzufügen. –

HTML-Text vor und nach (Präfix/Suffix) Eingabefeld

Antwort

Verwandte Themen