Question

我有一个带有两个+和 - 按钮以及一个隐藏输入的div。当我单击按钮时，输入中的值应该增加或减少，输入应该可见。问题是，根据缩放和firefox vs 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>

Answer 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.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>

还要记住，内联样式不是最佳实践！

在div中更改跨度的可见性和大小分为两行

1 个答案: