javascript - 根据另一个选择器宽度动态增加和减少输入文本框的大小

Question

我有一个输入文本框，里面有一些填充。我还有一个 wrapper 类选择器，它用在那个输入文本框旁边。我正在尝试从输入文本框中删除 set padding 并使该空间动态化，以便元素大小(尤其是宽度)根据 增加和减少屏幕尺寸(即移动设备或大屏幕 View )而不影响包装器。

文本框如下所示。 a、c、d、e 是动态显示的按钮。因此，如果右侧只有一个按钮，则此处b 的空间应扩大，如果右侧所有按钮均应缩小。

|____|____________________________ |____|_____|_____|

a b c d e

所以我拥有的 css 类选择器包括 b，另一个包括所有 c、d、e(包装器)。

我认为这不能仅通过 CSS 来完成。有什么建议吗？

CSS:

 .input {
  position: relative;
  width: 100%;
  max-width: var(--grid-main-max-width);
  padding: 1.188rem 2.9rem 1.188rem 4.5rem;
  margin: 0;
  font-size: 16px;
  border: 1px solid var(--color-gray);
  border-radius: 0.375rem;
  outline: 0;
  }


.wrapper {
position: absolute;
top: 0;
right: 1.5rem;
bottom: 0;
display: flex;
justify-content: center;
}

HTML

<div>
<input class="input">
  <div class= "wrapper">
  <button>c</button>
  <button>d</button>
  <button>e</button>
 </div>
</div>    

Answer 1

解决方案只需要计算input text box 和wrapper 的width 并分配差异作为 input 文本框右侧的填充。 onInput 事件中添加了以下小改动。

document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth;

并且还需要为 @media (--large-viewport)/@media (--medium-viewport) 使用媒体查询 > 为 input 分配不同的 padding。正如@Scott Marcus 在评论中提到的那样。