如何解决使用CSS
我想在输入字段旁边设置按钮的位置,但是加号按钮必须在减号按钮上方。因此,类按钮的高度将与输入字段相同。你能帮我吗?谢谢!
<body>
<div class="input">
<input name="number" type="text" readonly value="0" class="arrowsChange">
</div>
<script>
var inputNumber = document.querySelector('.arrowsChange');
inputNumber.insertAdjacentHTML('afterend','<div class="buttons"><button onclick="inc()">+</button><button onclick="dec()">-</button></div>');
function inc() {
let number = document.querySelector('.arrowsChange');
number.value = parseInt(number.value) + 1;
}
function dec() {
let number = document.querySelector('.arrowsChange');
if (parseInt(number.value) > 0) {
number.value = parseInt(number.value) - 1;
}
}
</script>
</body>
解决方法
您可以在输入包装程序上使用display: flex;
规则。然后在您的按钮包装上display: grid;
。但是,您在height
中的输入将更高。我让您知道如何解决其余的期望。
查看我的实现
.input{
display: flex;
}
.buttons{
display: grid;
}
.buttons button {
height: 15px;
line-height: 9px;
}
<body>
<div class="input">
<input name="number" type="text" readonly value="0" class="arrowsChange">
</div>
<script>
var inputNumber = document.querySelector('.arrowsChange');
inputNumber.insertAdjacentHTML('afterend','<div class="buttons"><button onclick="inc()">+</button><button onclick="dec()">-</button></div>');
function inc() {
let number = document.querySelector('.arrowsChange');
number.value = parseInt(number.value) + 1;
}
function dec() {
let number = document.querySelector('.arrowsChange');
if (parseInt(number.value) > 0) {
number.value = parseInt(number.value) - 1;
}
}
</script>
</body>
您还可以尝试学习Bootstrap,这是一个前端框架,可帮助您构建响应式和移动优先的网站。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。