内容可编辑内联 div 为空时移动

Question

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input" contenteditable="true"></div>
</div>

<br /><br /><br /><br />

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input border" contenteditable="true"></div>
</div>

当您单击 "blah blah blah."

时，注意插入符号的去向

在第一个示例中，它会跳转到 blah blah blah 之前的 ，直到您键入文本，然后它才会出现在正确的位置。

在第二个示例中，带边框的效果正常。

如何在不添加丑陋边框的情况下使插入符号出现在正确的位置？

编辑： 这似乎只发生在 Chrome，它在 Firefox 甚至 IE 中正常工作。

编辑 2: 我使用内联的原因是文本换行就好像它是一个平滑的延续，而不是换行整个块。例如：http://jsfiddle.net/khkurs5t/

Answer 1

您可以将 inline-block 布局与 min-width 一起使用。

.input{ display: inline-block; min-width: 1px;}

JSFiddle

Answer 2

您可以随时为 input、Fiddle

添加透明边框

border: solid 1px transparent;

这将使您的文本与您提到的一样保持在同一行。

注意* 猜猜谁不喜欢将文本保留在同一行上……是的……IE 但此方法在所有其他浏览器中都有效。祝朋友好运！

内容可编辑内联 div 为空时移动

Content editable inline div moves when empty

html

css

inline

alignment