Jquery 内容可编辑范围（内联块）webkit浏览器中的垂直对齐插入符号 P>我的形状是用可适应的跨距，而我的问题是，在焦点上，我的跨距不是垂直对齐，更好的是插入符号不在跨度的中间。我想把它放在中间，并且完全可见，但也可以用可伸缩的宽度，这样跨度就不应该是DelPaly：块既不内联。< /P> 图片：这是我在中间想要的问题，但插入符号必须完全可见

演示：

HTML

---

只需添加垂直对齐

vertical-align: middle;

看看你的小提琴：

---

固定插入符号位置的一种简单方法是将填充移动到li元素。结果并不完全相同-例如，底部边框采用整个宽度，而不是占位符文本的唯一宽度，蓝色轮廓仅在文本上-但通过一些调整，您可能能够获得想要的结果

li
{
    padding: 15px 20px;
    border-bottom: 2px solid orange;
}
.form-input span {
  font-size: 1em;
  color: #000;


  white-space: nowrap;
  display: inline-block;
  height: 20px;
  line-height: 20px;
}

编辑

如果你想保持一个轮廓，你只需要给你的跨度一个宽度。您还可以为其设置偏移，使其具有与以前相同的外观。但请注意，Internet Explorer不支持轮廓偏移

   .form-input span.input-span[contenteditable]:focus
{
    width: 100px;
    outline-offset: 15px;
}

---

您可以通过从跨度中移除固定高度和填充物来获得一些体面的外观。按照Julien的建议，仅在li上使用填充和/或边距来控制间距。但是，继续在跨度上使用底部边框，以使其具有可变宽度效果

这是一把小提琴的样品：

在IE-11、GC-43、FF-38和AS-5.1.7中进行了测试。FF最初显示了一个垂直偏移，当内容不存在时，键入某个内容并进行自我纠正。没有解决办法

这还允许您更改字体大小，而无需担心间距过大。尝试更改小提琴/片段中的大小

片段：

*{框大小：边框框；边距：0；填充：0；} ul.form-input{文本对齐：左；宽度：200px；列表样式：无；左边距：12px；} ul.form-input li{margin:6px 0px；padding:12px 0px；} 表格输入范围{ 显示：内联块；颜色：000；空白：nowrap； 填充：0px 16px；边框底部：2px实心橙色； 字体大小：1米；行距：2米； } ul.form-input span.input span[contenteditable]：空：：在{content:attrdata占位符；}之前 ul.form-input span.input span[contenteditable]：空：焦点：：在{content:'\00a0'；}之前 ul.form-input span.input span[contenteditable]：焦点{背景色：橙色；颜色：fff；}

---

它实际上只在中间…起初，它似乎是从跨度中溢出的！是的，这就是问题所在这就是你想要的吗@Abhitalks我的answeb是一样的，但他说这不是问题所在。等待更好的解释…@MarcosPérezGude:和你的答案一样？你在哪里看到竖直对齐：在我的小提琴中间？对不起，我编辑了小提琴的URL，但问题仍然存在。。。右击后键入插入符号不是垂直对齐的中心，当我点击和编辑内容时，看到中间的子弹。您确定正在查看以下小提琴吗？这不是答案。子弹不是问题…请稍等，我将用新的演示和图片编辑帖子，以便更好地理解谢谢你Julien的想法，但当我将填充移动到列表项时，单击后的跨距直到键入后才可见你在使用FF吗？因为它在FF上工作，但在Chrome上不工作……我发现它的webkit浏览器有问题，所以span元素是内联块而不是块，这一定是个问题。谢谢您的时间。我认为这是最好的答案。

li
{
    padding: 15px 20px;
    border-bottom: 2px solid orange;
}
.form-input span {
  font-size: 1em;
  color: #000;


  white-space: nowrap;
  display: inline-block;
  height: 20px;
  line-height: 20px;
}

   .form-input span.input-span[contenteditable]:focus
{
    width: 100px;
    outline-offset: 15px;
}