Question

我的Firefox版本47 W7

我有两个输入并排测试我的代码小时和分钟，侧。正如下面，

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

的显示（）和隐藏（）函数执行如下。

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

使用

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

Answer 2

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