Question

我正在编写一个文本编辑器，我遇到了一个问题：无论我做什么，这个输入和这个p元素都不会停留在同一行（但只有当p有内容时）。我的代码如下。我在我的CSS中尝试了display: inline-block;，但这不起作用。有什么建议吗？

＆＃13;

$(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(" ");
                });
            });

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：我让输入更加明显！

Answer 1

作为块元素的是p，因此您可以使用display: inline。这会将没有元素之前或之后的块元素转换为内联元素，如文本字符。您还可以使用display: inline-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>

Answer 2

您需要将p显示设置为inline或inline-block。默认情况下，它是一个块元素，因此它会断开一行。

将<input />和<p>保持在同一行

2 个答案: