I've got the following code.. http://jsfiddle.net/L593G/7/ what would I need to add to make the query box auto resize depending on the menu? So as to prevent the text (when it's long) disappearing under the menu? To see what I mean type a long sentence into the query box and it'll vanish behind the menu. I'd prefer if it just cut of开发者_如何学编程f the text on the far left rather than the "new" additions getting hidden.
Here's a very quick mock-up of what I think you're trying to accomplish. Instead of actually placing the select
inside the textbox, you can place both objects in a div
, "hide" the textbox, and make the div
look like a textbox.
Hope that makes sense.
http://jsfiddle.net/2jtsm/
What I did was:
- Instead of absolute positioning on menu, float it to the right
- Place the input box inside another div, set
margin-right
of div to 100px - Gave a fixed width to menu select box
Update:
If you can have a fixed width on the box, here's a quick CSS trick:
http://jsfiddle.net/abnZ3/
You can do this with tables:
<table style="width: 100%">
<tr>
<td style="width: 100%">
<input type="text" style="width: 100%"/>
</td>
<td>
<select>
<option value=1>a value</option>
<option value=2>another value</option>
<option value=3>and this is the final value</option>
</select>
</td>
</tr>
</table>
精彩评论