gpt4 book ai didi

javascript - 更改 div 中跨度的可见性和大小分成两行

转载 作者:太空宇宙 更新时间:2023-11-04 07:38:54 24 4
gpt4 key购买 nike

我有一个带有两个 + 和 - 按钮和一个隐藏输入的 div。当我点击按钮时,输入中的值应该增加或减少并且输入应该变得可见。问题是,根据缩放比例以及可能在 Firefox 和 Chrome 上的不同,按钮和输入分成三行。如何保持按钮和输入水平对齐?

<!DOCTYPE html>

<html>
<head>
<script>
function showInput(){
input=document.getElementById("input")
div=document.getElementById("mydiv")
input.style.width="40px";
div.style.width="90px";
input.style.visibility = "visible";
};
function change(increment){
input=document.getElementById("input")
input.value=Number(input.value)+increment;
input.style.visibility='visible';
console.log(input.value)
}

</script>
</head>
<body>
<a href="https://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox">I will check this to make it draggable in firefox</a>
<div id="mydiv" style="position: absolute; left: 450px; top: 2px; background-color: lightgrey; padding: 1px;" draggable
="true">
<span>
<button id="btnm" onclick="showInput();change(-1);">-</button>
<button id="btnp" onclick="showInput();change(+1);">+</button>
<input id="input" value=1 style="visibility: hidden; width: 4px;">
</span>
</div>
</body>
</html>

最佳答案

因为您使用的是 left 属性,所以 div 将在较小的设备上被推离页面。您可以改用 right 属性,并在 span 上应用 white-space: no-wrap。这将导致:

<!DOCTYPE html>

<html>
<head>
<script>
function showInput(){
input=document.getElementById("input")
div=document.getElementById("mydiv")
input.style.width="40px";
div.style.width="90px";
input.style.visibility = "visible";
};
function change(increment){
input=document.getElementById("input")
input.value=Number(input.value)+increment;
input.style.visibility='visible';
console.log(input.value)
}

</script>
</head>
<body>
<a href="https://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox">I will check this to make it draggable in firefox</a>
<div id="mydiv" style="position: absolute; right: 0px; top: 2px; background-color: lightgrey; padding: 1px;" draggable
="true">
<span style="white-space: nowrap">
<button id="btnm" onclick="showInput();change(-1);">-</button>
<button id="btnp" onclick="showInput();change(+1);">+</button>
<input id="input" value=1 style="visibility: hidden; width: 4px;">
</span>
</div>
</body>
</html>

另请记住,内联样式不是最佳实践!

关于javascript - 更改 div 中跨度的可见性和大小分成两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48690211/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com