我有一个带有两个 + 和 - 按钮和一个隐藏输入的 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/