の作り方<input type = "text">

Question

私はラベル/スパンの高さを入力テキストフィールドと同じ高さにしたいと思っています。

私はthis questionからの推奨に従おうとしましたが、いずれも機能しませんでした。

this fiddleを作成しました。これは自分のオーバーレイを表示します。しかし、数字は左側になければならず、NOギャップは全く見えてはいけません。

var overlay = document.createElement('div'); 
 
overlay.className = "overlay"; 
 
document.body.appendChild(overlay); 
 

 
var list = document.createElement('div'); 
 
var toLeft = document.createElement('span'); 
 
var toRight = document.createElement('span'); 
 

 
toLeft.textContent = "<"; 
 
toLeft.className = "control"; 
 

 
toRight.textContent = ">"; 
 
toRight.className = "control"; 
 

 
overlay.appendChild(list); 
 
overlay.appendChild(toLeft); 
 
overlay.appendChild(toRight); 
 

 
// build list 
 
var selection_history = [1, 2, 3, 4]; 
 

 
for (var i in selection_history) { 
 
\t var label = document.createElement('label'); 
 
\t label.textContent = parseInt(i) + "."; 
 
\t label.className = "list"; 
 
\t 
 
\t var input = document.createElement('input'); 
 
\t input.className = "comment"; 
 
\t 
 
\t var br = document.createElement('br'); 
 
\t 
 
\t list.appendChild(label); 
 
\t list.appendChild(input); 
 
\t list.appendChild(br); 
 
}

.overlay { 
 
    position: fixed; 
 
    border: 1px solid black; 
 
    right: 0px; 
 
} 
 
.list { 
 
    display: block; 
 
    width: 24px; 
 
} 
 
.comment { 
 
    display: block; 
 
    float: left; 
 
    height: 20px; 
 
} 
 
.control { 
 
    width: 50%; 
 
} 
 
.list, .control { 
 
    display: inline-block; 
 
    height: 25px; 
 
    background-color: black; 
 
    color: white; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.list:hover, .control:hover { 
 
    background-color: white; 
 
    color: black; 
 
}

任意のアイデア？

Answer 1

は、あなたはラベルが残って、なぜあなただ​​け浮いていない左側

.list { 
display: block; 
width: 24px; 
float:left; 
}