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

Question

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

iPhone view

Area of input box leaks into button

搜索框由 Drupal 9 上的搜索 API 页面模块生成。您可以在此处查看它的运行情况 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;
}

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

How can I troubleshoot my CSS widths for my search box

css

width

编辑

编辑 2