Question

我的表格是用满足的跨度制作的，我的问题是在焦点上我的跨度不是垂直对齐更好地说，插入符号不在跨度的中间。我希望它在中间并且完全可见，但也具有可扩展的宽度，因此跨度不应该是显示：阻止既不内联。

图片：http://i62.tinypic.com/125kri8.jpg这是我想要的中间问题，但插入符必须完全可见

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;

看到你的小提琴：

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

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

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

在IE-11，GC-43，FF-38和AS-5.1.7中进行测试（FF显示垂直偏移，当内容不存在时，输入内容并自行更正。无法解决此问题）

这也允许您更改font-size而不必担心太多间距。尝试更改小提琴/片段中的大小。

<强> 段：

＆＃13;
＆＃13;
* { 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; }
＆＃13;
<form action=""> <ul class=form-input> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </form>
＆＃13;
＆＃13;
＆＃13;

垂直对齐插入符号在contentedable span（内联块）webkit浏览器中

3 个答案: