Question

我正在尝试制作类似于页面的终端shell。

在jsfiddle看我的代码：

输入线似乎比输出线更高。尝试并键入一些内容按下一些输入你就会明白我的意思。

感谢。

HTML：

<body>
<div id="output"></div>
<div id="input"> 
    root@host
    <input type="text" id="command" />
</div>

的javascript：

$("#command").keyup(function (e) {
    if (e.keyCode == 13) {
        submit();
    }
});

var submit = function () {
    var commandEl = document.getElementById("command");
    var command = commandEl.value;
    var outputel = document.getElementById("output");
    var new_row = document.createElement("div");
    new_row.innerHTML = "root@host " + command;
    outputel.appendChild(new_row);
    commandEl.value="";
};

Answer 1

输入有一些填充。添加

padding:0px; 
margin-left:-1px;

输入css

Answer 2

行。最后通过为输入字段设置margin = 0，为输出div设置margin-top = 0，为输出div设置margin-bottom = 0来解决它：

#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }

input {
    border: 0;
    background: #000000;
    color: #00FF00;
    outline: none;
    font-family:'Rosario', sans-serif;
    font-size: 16px;
    padding: 0px;
    margin-left: -0.1px;
    margin: 0px;
}

感谢Johan的帮助！

输入和输出区域之间有不同的行高

2 个答案: