Css 从同一行搜索

我似乎无法使搜索按钮和输入框对齐在同一行上…当前文本框位于搜索按钮上方…有任何提示吗

<!-- 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 -->

搜寻

问题在于

的

和

是

显示：阻塞
并填充其容器的宽度

您可以将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规则。我添加了一个代码片段来演示代码


。标题md，h2，表格{
显示：内联块！重要；
}
.标题md{
宽度：80px！重要；
右边距：15px！重要；
}
搜索
我想出来了。这就成功了：

<!-- 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 -->


搜寻
添加您尝试过的CSS。谢谢，这很奇怪，因为它在我这边仍然不起作用。。。？它只是让输入文本框变宽了…@Bobi你能发布包括CSS在内的完整代码吗？这样我们就可以发现你的代码有什么问题。如果你认为答案是正确的，请你投票。我会在上传文件到服务器时通知你。有大量的css和js文件。
<!-- 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 -->