html - 输入内的按钮 (HTML/CSS)

Question

我希望我的按钮位于文本输入中。像这样：

这是我的代码：

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

我希望有人对此有答案。（Stack Overflow 上的其他答案对我没有帮助）

标签： htmlcss

Answer 1

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>