HTML工具栏元素对齐问题：搜索栏无法与按钮同行显示

我开发了一个带有工具栏的HTML页面，工具栏包含多个按钮与搜索筛选组件，代码如下：

<div class="topnav">
    <button>Add</button>
    <button>Delete</button>

    <button>Advanced Filters</button>
    <select id="select-items">
        <option value="uid">Uid</option>
        <option value="name">Name</option>
        <option value="email">Email</option>
        <option value="user_type">User type</option>
        <option value="last_login">Last login</option>
    </select>
    <select id="select-filter">
        <option>=</option>
        <option>></option>
        <option>>=</option>
        <option><</option>
        <option><=</option>
        <option>Starts with</option>
        <option>Contains</option>
        <option>Ends with</option>
    </select>
    <div>
         <form onsubmit="search()" class="search-bar">
                     <input id="searchBar" class="input searchbar" type="text"
                            aria-autocomplete="list"
                            aria-expanded="false"
                            style="height: 28.5px"
                     >
                    <button><i class="fa fa-search"></i>
                    </button>
                </form>
    </div>
</div>

目前搜索栏显示在按钮所在行的下方，无法与按钮处于同一行，尝试用float: right调整也没解决问题，原因主要有这几点：

• 块级元素默认换行：搜索栏外层的<div>是块级元素，默认会独占一行；哪怕加了float:right，如果没调整其他元素的布局，还是会被挤到下一行。另外<form>如果没设置display: flex或inline-block，内部输入框和按钮的默认样式也可能导致整体占位过大。
• 元素总宽度超出容器：工具栏里的按钮、下拉框加起来的宽度已经占满了.topnav的宽度，搜索栏没有剩余空间，只能换行。
• float使用逻辑错误：只给搜索栏容器加float:right，但其他元素还是默认的块级布局（独占一行），float元素只能在当前行剩余空间放置，没有空间就会换行；另外如果父容器没设置overflow: hidden清除浮动，可能导致布局计算异常。

解决办法 #

推荐用Flexbox布局，这是最简洁可靠的方案：

.topnav {
  display: flex;
  align-items: center; /* 让所有元素垂直居中 */
  gap: 10px; /* 元素之间的间距，可按需调整 */
  padding: 8px; /* 可选，给工具栏加内边距 */
}

/* 把搜索栏推到最右侧 */
.topnav > div {
  margin-left: auto;
}

/* 确保搜索框和按钮在一行 */
.search-bar {
  display: flex;
  gap: 0; /* 去掉输入框和按钮之间的间距 */
}

.search-bar input {
  border-right: none; /* 可选，去掉输入框右边框，和按钮合并视觉效果 */
}

如果一定要用float布局，可以这么调整：

.topnav {
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
  padding: 8px;
}

.topnav > button, .topnav > select {
  float: left;
  margin-right: 10px;
}

.topnav > div {
  float: right;
}

.search-bar {
  display: inline-flex; /* 让表单和其他元素同行 */
}

另外还要检查所有元素的宽度，确保总宽度不超过.topnav的宽度，必要时可以给下拉框或输入框设置max-width来限制宽度。

内容的提问来源于stack exchange，提问作者PriceyCash