如何实现textBox输入框与button按钮并排显示？

块级元素默认独占整行，是两个元素无法并排的核心原因，按需选择以下任意一种方案即可实现效果：

方案1：Flex布局（优先推荐） #

给输入框和按钮的共同父容器添加Flex布局属性，无需改动子元素原有代码，适配成本最低：

.search-wrap {
  display: flex;
  align-items: center; /* 垂直居中对齐，解决高度差错位问题 */
  gap: 8px; /* 自定义输入框与按钮的间距 */
}

对应HTML结构参考：

<div class="search-wrap">
  <input type="text" class="textBox" placeholder="输入搜索关键词" />
  <button type="button" class="search-btn">搜索</button>
</div>

• 该方案不会出现元素间隙异常、换行错位问题，对移动端适配友好，是目前主流的布局实现方式。

方案2：行内块转换（轻量简单场景适用） #

将两个元素从默认块级元素转换为行内块元素，即可在同一行排布：

.textBox, .search-btn {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
  box-sizing: border-box; /* 避免内边距、边框导致元素宽度溢出换行 */
}
.textBox {
  margin-right: 8px; /* 自定义两个元素的间距 */
}

• 注意：编写HTML时需要去掉输入框和按钮标签之间的换行、空格，否则两个元素之间会出现默认的4px空白间隙。

方案3：浮动布局（老旧项目兼容适用） #

给两个元素添加左浮动，使其脱离正常文档流实现同排显示：

.textBox {
  float: left;
  margin-right: 8px;
}
.search-btn {
  float: left;
}
/* 父容器添加清除浮动逻辑，避免高度塌陷 */
.search-wrap::after {
  content: "";
  display: block;
  clear: both;
}

• 该方案需要手动处理浮动带来的高度塌陷、边距计算问题，维护成本较高，新项目不推荐优先使用。

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