如何在同一行制作字体很棒的图标和控件

Question

我在网格表 header header 中有一个 Font Awesome 搜索文本框，但不幸的是，下面的代码使控件和图标在不同的行中。 我该如何解决这个问题？

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <table class="table table-bordered table-responsive-md table-striped text-left"> <thead> <tr> <th> <input class="form-control " type="text" placeholder="Search" class="fas fa-search" aria-label="Search"> <span class="input-group-addon"> <i class="fas fa-search" aria-hidden="true"></i> </span> </th> </tr> </thead> </table>

Answer 1

根据文档，将两个元素包装在一个输入组中，并将图标包装在一个 append div 中。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <table class="table table-bordered table-responsive-md table-striped text-left"> <thead> <tr> <th> <div class="input-group"> <input class="form-control" type="text" placeholder="Search" class="fas fa-search" aria-label="Search"> <div class="input-group-append"> <span class="input-group-text"> <i class="fas fa-search" aria-hidden="true"></i> </span> </div> </div> </th> </tr> </thead> </table>

Answer 2

您需要在 th 标签中使用 display 作为 inline-flex，例如 style="display:inline"