我希望我的按钮位于文本输入框内。像这样:
这是我的代码:
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 上的其他答案对我没有帮助)
最佳答案
* {
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>
关于html - 输入内的按钮 (HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69313378/