Is the maximum available width of the input HTML element available?

Question

I have a line in a webpage. which has three controls

SomeText Input Button It is like this <div> SomeText <Input/> <img> </div> 

In the above img floating right

Now I have an input size of 30, but in a small resolution 30 is too large for the line, and it splits into two parts.

I want the input width to be as accessible as possible instead of a fixed width.

If I try size = 100%, then the whole line starts, ending with clicking the text and img above and below in a new line.

How do I format this string?

Answer 1

In the simple case:

 <div> <label for="thing">SomeText</label> <input type="text" id="thing" /> <img /> </div> div label { float: left; width: 20%; } div input { width: 60%; } 

This assumes SomeText will fit perfectly in 20% of your width.

But perhaps this will not happen.

If you want to have fixed elements (e.g. 8em each) on the sides and subtract them from the input width, you need to say 100% minus 16em . Unfortunately, CSS does not have such an expression evaluation function. The best you can do is add packers to make 100% match what you really want:

 <div> <label for="thing">SomeText</label> <img /> <div> <input type="text" id="thing" /> </div> </div> div label { float: left; width: 8em; } div img { float: right; width: 8em; } div div { margin-left: 8em; margin-right: 8em; } div div input { width: 100%; } 

This is a bit ugly since you have to bother with the markup order for floats (or use absolute positioning). At this point, you might be better off just dropping the table to get the width you want:

 <table><tr> <td class="label"><label for="thing">SomeText</label></td> <td class="input"> <input type="text" id="thing" /></td> <td class="img"> <img /></td> </tr></table> table { table-layout: fixed; width: 100%; } tabel .label, table .img { width: 8em; } table input { width: 100%; } 

Several complex forms of liquid layout often exceed the capabilities of CSS-positioning and need help from the tables.

(In any case, a little window size at the entrance can also help to arrange the order.)