Как установить кнопку внутри ввода?

Question

Мне нужно разместить кнопку на моем входе

Я попытался установить относительное положение для формы и абсолютное значение для кнопки и изменил левый / верхний.Но в этих полях я должен получить большие значения для хорошо выполненного результата (я установил левое значение 600 пикселей для кнопки ввода на вводе, поэтому это меня смущает)

Я хочу вот так:

Есть ли способ сделать это для гибкого дисплея?

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

Если вы НЕ МОЖЕТЕ изменить структуру HTML, тогда у вас фиксированная ширина 500 пикселей, поэтому, конечно, вам понадобятся некоторые неприятные вычисления для ее размещения.

Если бы вы использовали проценты, было бы проще

Кроме того, у вас есть отступы (которые отличаются от ввода для кнопки)

Итак, во-первых, left кнопки должно быть calc(500px + 1.4rem);, где 500px - ширина ввода, а 1.4rem - от left/right padding до 0.7rem, которое имеет input. Теперь кнопка расположена сразу после ввода. Теперь переместите его влево на 100% его ширины.

Во-вторых, нижняя часть должна быть bottom: 4.2rem из-за form заполнения top/bottom из 4rem и затем 0.2rem, потому что заполнение ввода составляет 0.7rem, а заполнение кнопки - 0.6rem, поэтому 0.1 *2 меньше (по оси Y).

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: calc(500px + 1.4rem);
  bottom: 4.2rem;
  transform: translateX(-100%)
}

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

Answer 3

Чтобы это работало, вам нужно обернуть их в div, в котором есть свойство position: relative; css.

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>