Форма поиска Same Line

Question

Я не могу заставить кнопку поиска и поле ввода выровняться по одной строке ... в настоящее время текстовое поле находится над кнопкой поиска ... любые подсказки?

<!-- Search Bar --> 
<div class="headline headline-md"><h2>Search</h2></div> 
<div class="input-group margin-bottom-40"> 
<form method="get" action="@Url.ArticulateSearchUrl(Model)"> 
    <input type="text" name="term" class="form-control" placeholder="Search"> 
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span> 
</form> 
</div> 
<!-- End Search Bar --> 

Answer 1

Я понял это. Это сделал трюк:

<!-- Search Bar --> 
<div class="headline headline-md"><h2>Search</h2></div> 
<div class="input-group margin-bottom-40"> 
<form class="input-group" method="get" action="@Url.ArticulateSearchUrl(Model)"> 
    <div class="input-group-btn"> 
     <input type="text" name="term" class="form-control" placeholder="Search"> 
     <span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span> 
    </div> 
</form> 
</div> 
<!-- End Search Bar --> 

Answer 2

Проблема заключается в том, что <div> ВЛЯЕТСЯ <h2> и <form> являются display:block и заполнить ширину своего контейнера

Вы можете конвертировать HTML в

<div class="headline headline-md"><h2>Search</h2></div> 
<form method="get" action="@Url.ArticulateSearchUrl(Model)"> 
    <input type="text" name="term" class="form-control" placeholder="Search"> 
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span> 
</form> 

и добавить CSS

.headline-md,h2,form{ 
    display:inline-block; 
} 

.headline-md{ 
width:80px; 
margin-right:15px; 
} 

Я добавил !important, чтобы заставить новые правила CSS. Я добавил фрагмент кода, чтобы продемонстрировать код.

.headline-md,h2,form{ 
 
     display:inline-block !important; 
 
    } 
 

 
    .headline-md{ 
 
    width:80px !important; 
 
    margin-right:15px !important; 
 
    }

<div class="headline headline-md"><h2>Search</h2></div> 
 
    <form method="get" action="@Url.ArticulateSearchUrl(Model)"> 
 
     <input type="text" name="term" class="form-control" placeholder="Search"> 
 
     <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span> 
 
    </form>