Float left behaves unexpected.

My html code is,

<li>
    <label for="transparency_number" accesskey="T" class="transparency-label"><u>T</u>ransparency: </label>
    <input type="range" name="transparency_range" id="transparency_range" class="transpatency-range" min="0" max="100" value="0" />
    <input type="number" name="transparency_number" id="transparency_number" class="transparency-number" min="0" max="100" value="0" />
</li>

And my css code is,

.transparency-label,
.transparency-range,
.transparency-number {
  float: left;
}

From my aspect, its order should be,
Label, Range, and input[type=number]
but the order I got is,
Label, input[type=number], and Range
Why?