我喜欢给出一个标签/跨度与输入文本字段相同的高度,它应该放在它旁边。
我尝试按照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);
}
&#13;
.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;
}
&#13;
有什么想法吗?
答案 0 :(得分:0)
尝试为列表设置左浮动,然后您可以看到左侧的数字
.list {
display: block;
width: 24px;
float:left;
}