• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie platziere ich ein Button mit Bootstrap-Classes in ein Input-Field?

Tabula_Rasa

Mitglied
Hallo zusammen,

ich möchte ein Input-Field erstellen neben dem ein Button so platziert ist, dass man denken könnte, der Button selbst ist ein Teil des Inputs. Ich bekomme es jedoch nicht so recht hin- der Button ist z.B. immer etwas niedriger bzw. etwas höher als der Input aber nie in einer Linie mit dem Input. Wie müsste der Css-Code ausschauen, um das zu schaffen?

Mein bisheriger Code:

HTML:
<div class="search-input-container">
    <input type="text" placeholder="What are you looking for?" class="search-input">
    <button class="btn btn-primary">DefaultFilter</button>
</div>

Code:
.search-input-container{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.search-input{
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
}
 
Werbung:
Hi,
wenn der button als submit button dienen soll dann brauchst du diesen Code:
HTML:
<input type="submit" value="das steht auf dem button">

wenn du es in ein formular einbauen willst, schau mal hier vorbei:
hier lernst du wie du formulare baust
wenn du irgentein element nur bis z.b. der Mitte haben willst dann brauchst du css:

CSS:
<element> {
    width: <pixel anzahl>px;
}

linuxuser24
 
Werbung:
Hi ich hab ganz vergessen, um den button neben das input feld haben möchtest, css:
CSS:
input[text] {
    float: left;
}

ich hoffe er ist richtig

linuxuser24
 
Nicht böse sein, aber die letzten beiden Beiträge sind ziemlicher Murks.

Vergiss <input type="submit">. Verwende immer <button>
Fixe Pixelangaben sind nicht per se böse, aber in einem Bootstrap-Layout kaum praktikabel.
Vergiss float. Flexbox ist Dein Freund.
 
Zurück
Oben