How can make input element displayed same as block

问题:

I want to make universal fluid element with solid one near him and place them in line:

// wrapper starts here
[=(XX%)=solid=] [---------------------(auto)-fluid-]
[=(XX%)=solid====================] [--(auto)-fluid-]
[-(auto)-fluid---------------------] [=(XX%)=solid=]
[-(auto)-fluid--] [=(XX%)=solid====================]
// wrapper ends here

But when I tried traditional variant with "float:" style attribute - failed on "input" element: http://jsfiddle.net/iegik/pMRD8/

Also tried hack provided in similar question: What's keeping my input element from displaying like a block element?

回答1:

Could use a little javascript and math:

var b = $("#mainWrap").css('padding').split('p')[0];
$("#fluidInput").width($("#mainWrap").width() - $("#btn1").width() - (b * 2));

http://jsfiddle.net/TNCodeMonkey/pMRD8/4/