Question

以下是一个示例：http://jsfiddle.net/nojv18wf/

<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。”时，请注意插入符号的位置。

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

在第二个示例中，使用边框，它可以正常工作。

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

编辑：这似乎只发生在Chrome中，它在Firefox甚至IE中都能正常运行。

编辑2：我使用内联的原因是文本包装好像是一个平滑的延续，而不是包裹整个块。 E.G：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在空时移动

2 个答案: