contenteditable 跨度（内联块）webkit 浏览器中的垂直对齐插入符号

Question

我的表格是用 contenteditable span 制作的，我的问题是在焦点上我的 span 不是垂直对齐更好地说插入符号不在 span 的中间。我希望它位于中间并且完全可见，但也具有可缩放的宽度，因此 span 不应该是 dispaly: block neither inline。

图片 : http://i62.tinypic.com/125kri8.jpg 这是我希望它在中间的问题，但插入符号必须完全可见

演示 : http://jsfiddle.net/hqf8apwr/

HTML

 <form action="">
  <ul class=form-input>
   <li>
    <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Vaše meno"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Spoločnosť"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Pracovná pozícia"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Telefónne číslo"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Emailová adresa"></span>
  </li>
 </ul>
</form>

CSS

 li {
   list-style: none;
 }
 form {
   text-align: center;
   position: relative;
   left: -100px;
 }
 form > ul {
   margin: 0 auto;
 }
 form > ul > li {
   height: 60px;
   line-height: 60px;
   display: inline-block;
   font-size: 1.2em;
 }
 form .form-label {
   text-align: right;
   padding-right: 25px;
   color: black;
}
form .form-input {
   text-align: left;
   width: 200px;
   position: absolute;
   top: 0;
}
form .form-input li {
   height: 60px;
} 
form .form-input span {
   font-size: 1em;
   border-bottom: 2px solid orange;
   padding: 15px 20px;
   margin-bottom: -20px;
   white-space: nowrap;
   display: inline-block;
   height: 20px;
   line-height: 20px;
   max-width: 260px;
   overflow-x: hidden;
   background: #fff;
   color: #000;
}
form .form-input span.input-span[contenteditable]:focus {
   display: inline-block;
   font-size: 1em;
   padding-top: 20px;
   padding-bottom: 40px;
   overflow: hidden;
   background: orange;
   color: #fff;
   margin-top: 2px;
   padding-bottom: 20px;
}
form .form-input span.input-span[contenteditable]:empty::before {
   content: attr(data-placeholder);
}
form .form-input span.input-span[contenteditable]:empty:focus::before {
   content: '';
}

Answer 1

只需添加垂直对齐

vertical-align: middle;

看看你的fiddle：

http://jsfiddle.net/u1ba8eve/2

Answer 2

固定插入符号位置的一种简单方法是将填充移动到 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;
}

http://jsfiddle.net/564hjw8w/1/

编辑

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

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

http://jsfiddle.net/564hjw8w/3/

Answer 3

您可以通过从 span 中删除固定的 height 和 padding 来获得一些体面的外观。并且仅在 li 上使用 padding and/or margin 来控制间距（ 由 Julien 建议）。但是，继续在 span 上使用 border-bottom 以赋予其可变宽度效果。

这是一个示例 fiddle：http://jsfiddle.net/abhitalks/s3jmqh20/3/

已在 IE-11、GC-43、FF-38 和 AS-5.1.7 中测试（当内容不存在时，FF 最初显示垂直偏移，输入内容后它会自行更正。没有解决方法）

这还允许您更改 font-size 而不必担心过多地破坏间距。尝试更改 fiddle/snippet.

中的大小

片段:

* { box-sizing: border-box; margin: 0; padding: 0; }
ul.form-input { text-align: left; width: 200px; list-style: none; margin-left: 12px; }
ul.form-input li { margin: 6px 0px; padding: 12px 0px; }
ul.form-input span {
    display: inline-block; color: #000; white-space: nowrap;
    padding: 0px 16px; border-bottom: 2px solid orange; 
    font-size: 1em; line-height: 2em;
}
ul.form-input span.input-span[contenteditable]:empty::before { content: attr(data-placeholder); }
ul.form-input span.input-span[contenteditable]:empty:focus::before { content:'[=10=]a0 '; }
ul.form-input span.input-span[contenteditable]:focus { background-color: orange; color: #fff; }

<form action="">
    <ul class=form-input>
        <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Vaše meno"></span></li>
        <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Spoločnosť"></span></li>
        <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Pracovná pozícia"></span></li>
        <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Telefónne číslo"></span></li>
        <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Emailová adresa"></span></li>
    </ul>
</form>

contenteditable 跨度（内联块）webkit 浏览器中的垂直对齐插入符号

Vertical align caret in contenteditable span (inline-block) webkit browsers

html

css

forms

jquery

contenteditable