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

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