如何使 <label> 与 <input type=“text”> 高度相同

Question

我喜欢给标签/跨度提供与输入文本字段相同的高度，应该放在它旁边。

我尝试遵循 this question 的建议 - 但没有一个奏效。

我创建了this fiddle：它显示了我的叠加层。但是数字应该在左侧，并且根本看不到任何间隙。

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) {
	var label = document.createElement('label');
	label.textContent = parseInt(i) + ".";
	label.className = "list";
	
	var input = document.createElement('input');
	input.className = "comment";
	
	var br = document.createElement('br');
	
	list.appendChild(label);
	list.appendChild(input);
	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;
}