垂直對齊插入符

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/