0

我正在尝试制作一个类似页面的终端外壳。

在 jsfiddle 上查看我的代码：

http://jsfiddle.net/paopaomj/qGw4Q/9/

输入行似乎比输出有更多的行高。试试看，然后输入一些东西，按一些输入，你就会明白我的意思。

谢谢。

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="";
};
4

2 回答 2

2

输入有一些填充。添加

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

到输入 css

于 2013-08-27T07:41:56.130 回答
0

好的。我最终通过为输入字段设置margin = 0，为iutput 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;
}

感谢约翰的帮助！

于 2013-08-27T12:46:46.867 回答