Visuelle Verknüpfung einer Schaltfläche und Textfeld in CSS

Question

In einem Web-Forum, das ich (in Django/Python) erstellen, ist eine Funktion, dass Benutzer eine schnelle einfache Zeile Antwort schreiben können (Tweet Länge) und dann senden Sie es für alle Teilnehmer zu sehen. Derzeit ist dies, wie ich habe die einfache Form gelegt:

Welche Änderungen sollte ich in meinem HTML/CSS machen, stattdessen meine Form wie folgt angezeigt:

Ich bin auf der Suche nach einer vollständig reaktionsfähigen Lösung, die in allen Browsern robust und in reinem CSS integriert ist.

---

Meine aktuellen Code ist wie folgt:

<form method="post" action="{% url 'home_reply' pk=link.l %}"> 
    {% csrf_token %} 
    {{ replyform.description }}<br> 
    <button type="submit">Submit</button> 
</form> 

Ignorieren Sie die {{}} Syntax - das ist Djangos Template-Sprache.

Answer 1

Meine Technik etwas zu schaffen, wie die beiden mit einem Behälter wickeln

<div class="fancy-box-with-button"> 
    <input type="text"/> 
    <button>Submit</button> 
</div> 

dann alle <input> Stile .fancy-box-with-button bewegen dann <input> transparent und andere Änderungen vornehmen, wie Sie sehen, passen.

Machen Sie die Schaltfläche position: absolute und positioniert nach rechts, fügen Sie die erforderlichen zum übergeordneten Element hinzu, um zu verhindern, dass sich unsichtbare Eingabe überlappt.

Wahrscheinlich würde so aussehen.

.fancy-box-with-button { 
    background-color: white; 
    border-radius: 4px; 
    margin: 10px; 
    display: block; 
    position: relative; 
    height: 30px; 
    box-sizing: border-box; 
    padding-right: 100px; 
} 

.fancy-box-with-button input { 
    height: 100%; 
    width: 100%; 
    border: none; 
    margin: 0; 
    background-color: transparent; 
} 

.fancy-box-with-button button { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    height: 100%; 
    width: 100px; 
    border: none; 
    color: white; 
    background-color: blue; 
} 

working example

Answer 2

Jsfiddle Demo
Sie sollten die width: 1000px entfernen, da es das Textfeld zu breit machen wird, und es macht das Textfeld nicht ansprechbar.