suppose I have a simple container which have three element:
<div>
<span>hello world</span>
<input id="ipt" type='test'>
<input id="rge" type='range'>
</div>
but it show the last #rge always higher then the other two,
like this (view in chrome):http://jsfiddle.net/hh54188/SYNPa/1/
Why this happened?How can I solve this problem without adding other html element?just work with css
You should add the following CSS to your #rge definition:
vertical-align:middle;This aligns the element centred vertically on the line.