Button neben ein Eingabefeld

[iTzjxn3s]

Guten Tag,

ich probiere seit ein paar Stunden einen Button neben das Eingabefeld zu bekommen. ich hoffe ihr könnt mir dabei helfen.

HTML Code

   <div class="button grafic-button">
                        <div class="jeingabe"><br>
                        <label for="ISBN" size="18" maxlength="18">Geben Sie die ISBN des Buches ein:
                            <input style=" width: 250px; height: 25px;" id="ISBN" name="ISBN">
                      
                    </label>
 
                            <a  id="search" href="https://www.thalia.de/buch/aktuelles/buch-bestseller"><span>Search</span></a>

CSS:

.grafic-button a {
    display: block;
    width: 150px;
    height: 30px;
    line-height: 40px;
    font-size: 16px;
    font-family: sans-serif;
    text-decoration: none;
    color: #333;
    border: 2px solid #333;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    transition: all .35s;
    background-color: #FAC344;
}

.grafic-button a span {
    position: relative;
    z-index: 2;
}

.grafic-button a:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #A19F9e;
    transition: all .35s;
}

.grafic-button a:hover {
    color: #FAC344;
}

.grafic-button a:hover:after {
    width: 100%;
}

 

[AoW]

Du kannst beide Elemente zum Beispiel aif display:inline-block; setzen. Gibt aber viele Möglichkeiten. Zum Beispiel auch eine Flexbox.

 

[basti1012]

display:flex wäre auch nee lösung

   <div class="button grafic-button">
           <div class="jeingabe"><br>
               <label for="ISBN" size="18" maxlength="18">Geben Sie die ISBN des Buches ein:
                   <input style=" width: 250px; height: 25px;" id="ISBN" name="ISBN">
                </label>
                <a  id="search" href="https://www.thalia.de/buch/aktuelles/buch-bestseller"><span>Search</span></a>
          </div>
</div>
    <style>
    .jeingabe{
    display:flex;
    }
    
    </style>