Как немного переместить кнопку в html

Question

У меня проблема с кнопкой поиска рядом с полем поиска.

Вот код:

<form action="search.php"> 
    <input type="text" name="q" class="am-form-field"> 
    <span class="am-input-group-btn"> 
    <button class="am-btn am-btn-primary" type="button submit"><span class="am-icon-search"></span> </button> 
    </span> 
    </form> 

Я использую рамки AmazeUI CSS https://github.com/amazeui/amazeui/

здесь является CSS:

.am-form-field { 
    display: block; 
    width: 100%; 
    padding: 0.5em; 
    font-size: 1.6rem; 
    line-height: 1.2; 
    color: #555555; 
    vertical-align: middle; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 0; 
    -webkit-appearance: none; 
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
} 

Answer 1

Если вы можете (в зависимости от поддержки браузера y ou хотят достичь) используйте flexbox, просто добавьте display: flex в тег формы.

В противном случае вы можете установить ширину в input.am-форм-поля (например, 80% или любой другой) и добавить к нему float: left