javascript - 范围改变会忽略css？

Question

我有这个范围框，右边显示了它现在的值，但是数字有点低于范围栏，如何解决这个问题？:

这是我想要的:

HTML/CSS/Javascript:

#ranger {
    vertical-align: middle;
    line-height:normal;
    margin-left:4px;
    margin-top:-10px;
}
input {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : block;
}

label span {
    display : inline-block;
    width : 150px;
}

<input type="range" id="range" name="code" value="1" min="1" max="100" onchange="document.getElementById('ranger').innerHTML = document.getElementById('range').value;" /><span id="ranger">1</span>

示例:http://jsfiddle.net/37B95/

Answer 1

使用

display: inline-block;

我通常使用临时的 css 大纲来微调我的样式

selectors{
    outline: 1px solid red;
}

http://jsfiddle.net/Victornpb/xcBcs/