如何解决搜索框的 CSS 宽度问题

Question

我一直在尝试按照我想要的方式设置我的搜索框的样式，并且它几乎就在那里。唯一的问题是我的宽度在某处不稳定。乍一看，它们看起来不错，但输入框的区域泄漏到了提交按钮中。这在我的border-right: none; 被忽略并且圆形边框与按钮重叠的移动设备上最为明显。在 Chrome 上也很明显，建议下拉菜单悬在按钮上。

iPhone view

Area of input box leaks into button

搜索框是由 Drupal 9 上的 Search API Pages 模块生成的。您可以在此处https://verygomez.com/search 看到它的实际效果，它同时出现在侧边栏块和页面上。我需要它们看起来不错，但它们共享大部分 CSS。我有点不知所措。顺便说一句，我希望侧边栏中的搜索栏更宽一些，但我不知道该怎么做。

.search-api-page-block-form-search {
    position:relative;
    width:100%;
    display:inline-block;
}
.search-api-page-block-form-search .form-item {
  width: 70%;
  float: left;
}
.search-api-page-block-form-search .form-actions {
  width: 30%;
  float: right;
}
.search-api-page-block-form-search .form-type-search input {
  border-right: none !important;
  text-indent: 25px;
  background-color: transparent;
  position: absolute;
  display: inline-block;
  width: 66%;
}
.search-api-page-block-form-search .form-type-search:before {
  content: "\f002";
  font-family: FontAwesome;
  position: relative;
  top: 8px;
  left: 25px;
  background-color: transparent;
}
.search-api-page-block-form-search .form-item,
.search-api-page-block-form-search .form-actions {
  margin: 5px auto!important;
  display: inline-block;
  font-family: Consolas, "courier new";
}
.search-api-page-block-form-search .form-actions input {
  font-family: FontAwesome;
  margin: 0 !important;
}
.path-search form.search-form>.form-wrapper>.form-submit{
    position:relative;
    right:0;
    bottom:0;
    margin:0 !important;
    width:100%;
}

编辑

我有一个进度更新。在此处将位置从绝对位置更改为相对位置：

.search-api-page-block-form-search .form-type-search input {
  border-right: none !important;
  text-indent: 25px;
  background-color: transparent;
  position: relative;
  display: inline-block;
  bottom: 25px;
}

已将输入框更正为正确的宽度，使我能够取消 66%。这可以解决我的问题，但现在这些框不再水平对齐。我试图用底部来捏造它，但它当然还不够接近。我只是有一个不同的问题要解决。 （不过，我设法让侧边栏搜索框更宽，所以还不错）。

编辑 2

晚上的最后进度更新。我现在已经把这个问题换成了另一个问题。将 fontawesome 背景图像更改为position: absolute;（因为它也在我要复制的默认搜索框的代码中），框和按钮现在完全对齐并且宽度看起来不错。 但是，通过绝对设置，搜索图标现在在侧边栏中的位置与在页面中的位置不同，并且它会根据屏幕大小而变化，因此它在移动设备上也不会对齐。有没有办法让它整齐地放在搜索框中？我觉得我错过了什么。

.search-api-page-block-form-search .form-type-search:before {
  content: "\f002";
  font-family: FontAwesome;
  position: absolute;
  top: 42px;
  left: 34px;
  background-color: transparent;
}

Answer 1

我做到了！！！在我进行上述编辑中描述的更改后，我只是想念这个小野兽！

.search-api-page-block-form-search .form-type-search {
    position: relative;
}