代码之家 › 专栏 › 技术社区 › aless80

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

css html javascript

aless80 · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

sliptype 6 年前

因为您正在使用 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>

还要记住,内联样式不是最佳实践!