javascript - 将 &lt;input&gt; 和 <p> 放在同一行

Question

我在一个文本编辑器上工作，我遇到了一个问题:无论我做什么，这个输入和这个 p 元素都不会保持在同一行上(但只有当 p 有内容时)。我的代码如下。我在我的 css 中尝试了 display: inline-block; ，但这没有用。有什么建议吗？

$(document).ready(function () {
                $(document).keyup(function () {
                    var a = $("#typ").val();
                    var b = $("#txt").text();
                    if (a == "") {
                        //if backspace
                        var c = b.substring(0, b.length - 1);
                    } else {
                        //otherwise
                        var a = a.substring(1, a.length);
                        var c = b.concat(a);
                    }
                    $("#txt").text(c);
                    $("#typ").val(" ");
                });
            });

.type:focus {
    outline-width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
            <p class="text" id="txt"></p>
            <input class="type" id="typ" type="text" value=" "/>
</div>

编辑:我让输入更加可见!

Answer 1

作为 block 元素的是p，所以你可以使用display: inline。这会将 block 元素(之前或之后没有元素)转换为内联元素，如文本字符。您还可以使用 display: inline-block 将其转换为可以内联的 block 。

.type {
    border: none;
}
.type:focus {
    outline-width: 0;
}
.text {
    display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
            <p class="text" id="txt">I have a p.</p>
            <input class="type" id="typ" type="text" value="I have an input."/>
            Huh! Not going to make the joke...
</div>