垂直对齐插入符

Question

我有CONTENTEDITABLE跨度制作形式，我的问题是，我的重点跨度不垂直对齐还好说插入符号是不是在跨度的中间。我希望它在中间和完全可见，但也可扩展的宽度，因此跨度不应该是一个显示：块既不内联。

图片：http://i62.tinypic.com/125kri8.jpg这是问题，我想这中间还要插入符号必须清晰可见

DEMO：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

可以实现一些体面的外观支持。并且仅在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而不必担心太多打破间距。尝试改变小提琴/片段中的大小。

片段：

* { 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/

编辑

如果你想保持一个大纲，你只需要给你的跨度的宽度。你也可以给它一个偏移量，使它具有和以前一样的外观。但是请注意，大纲抵消来自span删除您的固定height和padding不是由Internet Explorer

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

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