在 contenteditable span（inline-block）webkit 浏览器中垂直对齐插入符号

Question

我的表单是用 contenteditable 跨度制作的，我的问题是我的跨度不是垂直对齐，更好的是说插入符号不在跨度中间。我想把它放在中间并且完全可见，但也有可扩展的宽度，所以 span 不应该是一个显示：既不阻止内联。

图片：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

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

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

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

这还允许您更改font-size，而不必担心过多地破坏间距。尝试更改 fiddle/sn-p 中的大小。

片段：

* { 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:'\00a0 '; }
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>

Answer 2

只需添加垂直对齐

vertical-align: middle;

看看你的小提琴：

http://jsfiddle.net/u1ba8eve/2

Answer 3

修复插入符号位置的一种简单方法是将填充移动到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 不支持轮廓偏移

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

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