输入文本重叠输入字段内的按钮

Question

我正在尝试使用 React 中的字段创建一个输入字段<input />，并使用情感对其进行样式设置。输入字段右侧有两个按钮，如下所示：

按钮使用 定位position:absolute。这使得文本和按钮重叠：

有谁知道如何阻止文本到达按钮所在的区域，即使它们是使用情感绝对定位的？

Answer 1

一种简单的方法是padding-right向输入添加等于或大于按钮宽度的值。

更好的方法是像 Boostrap 的输入组一样创建它：https://getbootstrap.com/docs/4.5/components/input-group/#button-addons

在这种情况下：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

您可以像隐藏输入样式但向父元素添加边框一样设置其样式。

.input-group { 
  display: flex;
  align-items: center;
  padding: .25rem;
  border: 1px solid #ddd;
  border-radius: .25rem;
}

.input-group > .form-control { 
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0 .25rem;
}

.input-group-append {
  flex: 0 0 auto; 
  display: flex;
  align-items: center;
}

.input-group-append > .btn {
  margin: 0;
}

完整示例： https: //codepen.io/emendelski/pen/WNxyEXb