html中如何让文本框和按钮在同一行

Question

我想将文本框和按钮保持在同一行，但它分为两行：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div> <div style="float:left"> <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button> <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button> </div> <div style="float:right; width:40%;"> <form asp-controller="Expense" asp-action="Index" class="form-group"> <div class="col-sm-6"> <input class="form-control" type="text" name="SearchString" placeholder="Search"> <button type="submit" class="btn btn-default btn-info">Filter</button> </div> </form> </div> </div>

Answer 1

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

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div> <div style="float:left"> <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button> <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button> </div> <div style="float:right; width:40%;"> <form asp-controller="Expense" asp-action="Index" class="form-group"> <div class="col-sm-12 d-flex"> <input class="form-control mr-1" type="text" name="SearchString" placeholder="Search"> <button type="submit" class="btn btn-default btn-info">Filter</button> </div> </form> </div> </div>

Answer 2

可能实现你想要的东西的最好方法是这样的

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

Answer 3

“过滤器”按钮位于第二行，因为 Bootstrap 的form-control class 具有display: block和width: 100% 。 更改display: inline-block并减少width: 50% 。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div> <div style="float:left"> <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button> <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button> </div> <div style="float:right; width:40%;"> <form asp-controller="Expense" asp-action="Index" class="form-group"> <div class="col-sm-8"> <input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;"> <button type="submit" class="btn btn-default btn-info">Filter</button> </div> </form> </div> </div>

Answer 4

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div> <div style="float:left"> <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button> <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button> </div> <div style="float:right; width:40%;"> <form asp-controller="Expense" asp-action="Index" class="form-group"> <div class="col-sm-8"> <div class="d-flex"> <input class="form-control" type="text" name="SearchString" placeholder="Search"> <button type="submit" class="btn btn-default btn-info ml-2">Filter</button> </div> </div> </form> </div> </div>