如何在同一行制作字體很棒的圖標和控件

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"