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

Question

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

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

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

标签： cssreactjsinputoverlapemotion

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