2012-02-22 62 views
2

我想要一個可調整大小的搜索框,就像你們都知道它來自例如。 FireFox 所以我需要一個輸入框和一個放大鏡作爲右側的按鈕。可調整大小的搜索框,右邊有圖像

我已經做了一個試驗案例吧:

http://jsfiddle.net/L8Wp3/61/

的事情是,調整大小不起作用。 當我調整整個頁面的大小時,輸入表單應該調整大小,並且圖像應該隨它一起流動。但我已經嘗試了很多東西,圖像有時只是打破了一條線....

我想要實現的是:我有兩個輸入標籤(A & B)在div容器內,現在B應該流向權利和A應該採取所有可用的重命名空間。

我怎樣才能在CSS實現這一點?

+0

我不明白,你想是這樣的http://jsfiddle.net/L8Wp3/65/? – jacktheripper 2012-02-22 07:28:45

+0

絕對不是,你知道FireFox的搜索框嗎?當您調整FF大小時,您將看到只有輸入框正在調整大小,而搜索按鈕不可用。我想要同樣的效果。 – Zack 2012-02-22 18:35:11

回答

0

給你的搜索框(輸入文本)一

大小調整:水平; 溢出:auto;

和最大調整大小:

最大寬度:YYYpx;

+0

您能否詳細說明一下它將如何使輸入框可調整大小? – 2012-02-22 09:40:30

+0

在這裏,你去:http://www.w3schools.com/cssref/css3_pr_resize.asp – haco 2012-02-24 12:18:49

0

其實我並不清楚明白你的問題,但如果你想調整它,嘗試使用媒體查詢,與每一個不同寬度的div,你可以添加你想要你的輸入準確的寬度,你可以採取例如如何建立一個搜索框,在這裏簡單:

Search box:

+0

對不起,也許我不夠清楚。看看FireFox搜索框,當您調整整個窗口的大小時,搜索框會縮小,並且搜索圖標會隨之一起流動。這就是我想要的。當我將搜索框的寬度設置爲85%會調整大小,但正如你所看到的,在一定的尺寸下,它會使圖標突破線條:http://jsfiddle.net/L8Wp3/68/ – Zack 2012-02-22 18:41:15

+0

添加圖像是描述你的最佳方式想! – 2012-02-23 05:49:01