时间戳

首页 > 解决方案 > 如何定位删除按钮

html - 如何定位删除按钮

问题描述

我正在尝试实现下图中的内容，但它对我不起作用。

我尝试使用相对位置和正确位置为 0px，但没有任何改变。

如果我使用 top 为 -2px 它会向上移动但将其定位在右侧不起作用

在此处输入图像描述

.remove {
  background: red;
  color: white;
  padding: 0px 3px 3px 3px;
  border-top-right-radius: 1px;
  font-size: 1em;
  position: relative;
  right: 0px;
  top: -1em;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div className="form-group mb-2">
  <label htmlFor="" className="mb-2">Contact Info <span>*</span></label>
  <div className="contact-info">
    <div className="info-items">
      <button className="remove">x</button>
      <div className="row">
        <div className="col-md-6">
          <label htmlFor="" className="mb-2">Phone Number <span>*</span></label>
          <input type="text" className="form-control" />
        </div>
        <div className="col-md-6">
          <label htmlFor="" className="mb-2">Address <span>*</span></label>
          <input type="text" className="form-control" />
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

.contact-info {
  position: relative;
}

.remove {
  position: absolute;
  top: 0;
  right: 0;
}

推荐阅读