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;。這應該允許元素像文本一樣流動，但保留其塊狀特性。