范围变化会忽略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/

Answer 2

一种可能的解决方案就是设置vertical-align: top：

更改

#ranger {
    vertical-align: middle;
...
}

#ranger {
    vertical-align: top;
...
}