如何设置输入内部的按钮？

Question

我需要在输入中放置按钮

我尝试为表单设置相对位置，为按钮设置绝对位置，并更改了左/上。但是在该字段中，我必须将值设置为较大的值才能获得良好的效果（我在输入中将“位置”按钮设置为左600px，这使我感到困惑）

我想要这样：

有没有一种方法可以用于flex显示？

form {
    padding: 4rem 0;
    position: relative;
}
input[type=text] {
    background: #fff;
    width: 500px;
    padding: 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.6rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    left: 600px;
    top:5px;
}

 <form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

Answer 1

尝试以下代码。没有错误：

form {
    padding: 4rem 0;
    position: relative;
    display: table;
}
input[type=text] {
	box-sizing: border-box;
    background: #fff;
    width: 500px;
    padding: 0.7rem 115px 0.7rem 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.6rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    right: 4px;
    transform: translateY(2.5px);
}

 <form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

Answer 2

要使其正常工作，您需要将它们包装在具有div css属性的position: relative;中。

form {
    padding: 4rem 0;
    position: relative;
}

.relative {
position: relative;
}

input[type=text] {
    background: #fff;
    width: 500px;
    padding: 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.7rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    right: 141px;
    top:1px;
}

<form>
  <div class="relative">
    <input type="text" placeholder="Enter text">
    <button>Send Invite</button>
  </div>
</form>

Answer 3

如果您无法更改HTML结构，那么您将宽度固定为500px，因此，当然，您必须进行一些讨厌的计算才能定位它。

如果您使用百分比会更容易

最重要的是，还有填充（与按钮的输入不同）

因此，首先，按钮的left应该是calc(500px + 1.4rem);，其中500px是输入的宽度，1.4rem来自{{的left/right padding} 0.7rem具有的1}}。现在，按钮位于输入之后。现在，将其宽度的100％移到左侧。

第二，由于input的{​​{1}}填充bottom: 4.2rem，因此底部应为form，然后由于输入的填充为{{1} }和按钮的填充为top/bottom，因此4rem较小（在Y轴上）。

0.2rem

0.7rem