时间戳

首页 > 解决方案 > 如何在html中将文本框和按钮保持在同一行

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

问题描述

我想将文本框和按钮保持在同一行，但它出现在两个不同的行中：

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

标签： htmlcssbootstrap-4

解决方案

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

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

推荐阅读