WordPress Elementor Pro环境下搜索表单与提交按钮融合问题咨询

存在的问题 #

1. 布局逻辑错误：.domSearchWrap设置display: inline无法对子元素进行对齐控制，同时form、input、button作为行内元素，默认会因为标签之间的换行/空格产生空白间隙，导致两个元素无法贴合。
2. 边框参数不统一：搜索框边框为3px，按钮边框仅1px，两者总高度不一致，出现垂直错位。
3. 属性拼写错误：text-align: centre为错误写法，正确拼写为text-align: center。
4. 缺少基础样式补充：没有给搜索框设置宽度、内边距，也没有给按钮设置垂直对齐、光标样式、图标颜色等属性，导致显示异常。

修正后的代码 #

CSS代码

.domSearchWrap form {
  display: flex;
  align-items: center;
  margin: 0;
}
.domSearchWrap .searchTerm {
  border: 3px solid #0a7c82;
  border-right: none;
  border-radius: 20px 0 0 20px;
  outline: none;
  color: #0a7c82;
  height: 60px;
  padding: 0 15px;
  width: 350px; /* 可根据需求调整宽度 */
  box-sizing: border-box;
  margin: 0;
}
.searchTerm:focus {
  outline: none;
}
.domSearchWrap .searchButton {
  width: 60px; /* 调整为和高度一致更协调，可按需修改 */
  height: 60px;
  border: 3px solid #0a7c82;
  background: #0a7c82;
  text-align: center;
  border-radius: 0 20px 20px 0;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

HTML代码（仅调整标签排版消除间隙，逻辑不变）

<div class="domSearchWrap">
  <div class="domSearch">
    <form action="https://XX.XXXX.com/cart.php?a=add&domain=register" method="post">
      <input type="text" class="searchTerm" placeholder="请输入您需要的域名..." name="query"><button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
    </form>
  </div>
</div>

替换上述代码后即可实现搜索框与按钮无缝融合的效果，可直接在Elementor的Custom HTML小部件中使用，CSS可添加到WordPress自定义样式或者Elementor页面的自定义CSS区域。

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