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

Have different line-height between input and output area

本文关键字：输入 输出 区域 之间      更新时间：2023-09-26

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

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

输入得到了一些填充。添加

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

到输入css

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

谢谢Johan的帮助！

相关文章：