如何在html中将文本框和按钮保持在同一行

我想让文本框和按钮保持在同一行，但它有两行：

增加费用
费用报告
滤器

实现您想要的目标的最佳方式可能是这样的

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
      <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
    </div>

    <form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
      <input class="form-control" type="text" name="SearchString" placeholder="Search">
      <button type="submit" class="btn btn-default btn-info">Filter</button>
    </form>
  </div>
</div>

增加费用
费用报告
滤器

将包含输入和按钮元素的父元素设置为弹性框。我使用引导实用程序类来实现这一点。我还向输入元素添加了一个小的边距，也使用了一个引导实用程序类

增加费用
费用报告
滤器

由于引导的

表单控件

类具有

显示：块

和

宽度：100%

，因此“过滤器”按钮位于第二行。更改并减小宽度：50%

增加费用
费用报告
滤器

增加费用
费用报告
滤器

为它们添加一个带有display:inline块属性的css类