Question

我正在W7上的Firefox Ver 47上测试我的代码

我有两个输入小时和分钟，并排。如下，

Click to view image showing inputs side by side

输入和按钮定义如下

<input style="color: green; width: 50px; height: 17px; background-color: lightgrey; " type='number' id="hour1" value="22" min="0" max="23"> 
<input style="color: green; width: 50px; height: 17px; background-color: lightgrey; " type='number' id="min1" value="40" min="0" max="59"> <br>
<input type='button' value="Show custom time" onclick="show()">  
<input type='button' value="Hide Custom time" onclick="hide()">

现在，当我点击'显示自定义时间'按钮时，两个元素都会在左下方对齐（我不希望这种情况发生）。

Click here to view image showing inputs position shifted

show（）和 hide（）函数在触发时执行如下。

function show()
    {
    document.getElementById('hour1').style.display = "block";
    document.getElementById('min1').style.display = "block";
    }
    function hide()
    {
    document.getElementById('hour1').style.display = "none";
    document.getElementById('min1').style.display = "none";
    }

我通过引入 CSS

部分解决了这个问题

#hour1 {position:fixed; top:5px; left:5px;}
#min1 {position:fixed; top:5px; left:70px;}

然而position:fixed会产生不良的浮动效果。

问题是当我只修改显示属性时，为什么位置会发生变化和如何解决/修复此问题或者我做错了什么？

如果有帮助，请尝试在线搜索并遇到scenario，其中style.display = "block";更改了表格的大小。使用style.display = "table";克服了这个问题。

Answer 1

尝试设置display: inline-block;而不是display: block;。这应该允许元素像文本一样流动，但保留它们的块状属性。

Answer 2

使用

function show()
    {
    document.getElementById('hour1').style.display = "inline-block";
    document.getElementById('min1').style.display = "inline-block";
    }

当我使用.style.display =“block”时，为什么元素的位置会发生变化？

2 个答案: