css - 同行搜索表单

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

问题是 <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>