如何将Filter标签对齐到页面右上角右对齐搜索框的左侧

你遇到的错位问题是因为仅给搜索框单独设置了右浮动，没有将Filter标签和搜索框作为一个整体处理，按以下步骤修改即可：

1. 调整HTML结构 #

将Filter标签和搜索框外层包裹一个独立容器，同时删除搜索框原有的float: right行内样式，另外你原有代码中.container闭合前存在多余的</button>标签，一并删除避免语法异常：

<div class="container">
    <!-- 新增外层容器 -->
    <div class="search-group">
        <label>Filter: </label> 
        <input type="text" id="myInput" onkeyup='tableSearch()' placeholder="Set">
    </div>

    <table class="table" id="myTable" data-filter-control="true" data-show-search-clear-button="true">
        <!-- 原有表格内容保持不变 -->
    </table>
    <!-- 其余原有内容保持不变，删掉多余的</button> -->

2. 添加对应CSS样式 #

给新增的.search-group容器设置右浮动，让标签+搜索框的组合整体靠右上角对齐，可自行调整下边距控制和下方表格的间距：

.search-group {
  float: right;
  margin-bottom: 16px;
}

修改完成后，Filter标签就会自动贴合在搜索框左侧，两个元素作为整体靠右上角显示。

内容的提问来源于stack exchange，提问作者Iris S.