搜索表單同一行

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> S中<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>