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

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

Tabula_Rasa

Mitglied
12 Mai 2017
262
2
18
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.195
435
83
68
Auch in diesem Fall ist Flex dein Freund:
Code:
        .search-input-container {
            width: 100%;
            max-width: 600px;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }

        .search-input {
            width: 400px;
            max-width: 100%;
            /* margin: 0 auto; */
        }
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
262
2
18
Auch in diesem Fall ist Flex dein Freund:
Code:
        .search-input-container {
            width: 100%;
            max-width: 600px;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }

        .search-input {
            width: 400px;
            max-width: 100%;
            /* margin: 0 auto; */
        }
Hey, danke funktioniert einwandfrei. Muss mich mal mehr mit display:flex beschäftigen.
 
Werbung:

linuxuser24

Neues Mitglied
20 Januar 2021
10
0
1
20
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
 

linuxuser24

Neues Mitglied
20 Januar 2021
10
0
1
20
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
 

jonas3344

Mitglied
25 Oktober 2019
94
27
18
37
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.
 
Werbung:
Werbung:

Neueste Beiträge