更改 div 中跨度的可见性和大小分为两行
Posted
技术标签:
【中文标题】更改 div 中跨度的可见性和大小分为两行【英文标题】：Changing visibility and size of span in div breaks in two lines 【发布时间】：2018-07-19 07:14:44 【问题描述】：我有一个带有两个 + 和 - 按钮和一个隐藏输入的 div。当我单击按钮时，输入中的值应该增加或减少，并且输入应该变得可见。 问题在于，根据缩放以及可能在 Firefox 和 chrome 上，按钮和输入分成三行。如何保持按钮和输入水平对齐？
<!DOCTYPE html>
<html>
<head>
<script>
function showInput()
input=document.getElementById("input")
div=document.getElementById("mydiv")
input.style.;
div.style.;
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://***.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>
【问题讨论】：
【参考方案1】：因为您使用的是left 属性，所以 div 将在较小的设备上被推离页面。您可以改用right 属性并在跨度上应用white-space: no-wrap。这将导致：
<!DOCTYPE html>
<html>
<head>
<script>
function showInput()
input=document.getElementById("input")
div=document.getElementById("mydiv")
input.style.;
div.style.;
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://***.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>还请记住，内联样式不是最佳做法！
【讨论】：
感谢您提供有关内联样式的提示。我把样式放在那里是因为 HTML 是由我在 Tampermonkey 中的脚本生成的（也许我应该在那里使用 CSS 而不是 div.style.backgroundColor="lightgrey"; 之类的调用）。我认为我不关心小型设备，我想将该 div 放在那个绝对位置（我的按钮将显示在其他网页的顶部）。 将 style="white-space: nowrap" 添加到 span 的唯一问题是 div 不再持有按钮。 什么意思？按钮仍然包含在 div 中 当您单击 + 或 - 时不会。你会看到后面的灰色 div 变得比两个按钮还小。在firefox中更明显。但这是我的错：在 showInput 我改变了 div 的宽度。顺便说一句，我将“空白：nowrap”移到了 div。以上是关于更改 div 中跨度的可见性和大小分为两行的主要内容，如果未能解决你的问题，请参考以下文章