Mobie網站的CSS - 搜索框和按鈕的組合寬度爲100％？

我試圖優化我的網站的移動。我進行1列液體佈局。我的問題是，我不能讓我的搜索框和提交按鈕是100％寬。Mobie網站的CSS - 搜索框和按鈕的組合寬度爲100％？

這是我想：

Width

我不能設定搜索框（輸入）一個固定的寬度。它似乎也忽略了寬度：100％和絕對定位。無論如何實現這一目標？我想也許如果我把輸入內聯元素，它會流到100％，但它似乎並不。由於

更新 - 這個怎麼樣： http://jsfiddle.net/jdln/3ms5f/

我表現的搜索框中100％寬，但是把它放在其中有5em的填充右側的div容器。由於集裝箱格是100％寬的，它會將按鈕敲到新的一排，但是我會用絕對定位「提起」按鈕。

當我調整窗口大小時，它似乎很好用。我認爲如果我使用em代替px的寬度，佈局會更加健壯，這意味着我必須規範文本大小。

我的解決方案有問題嗎？由於

來源

2011-09-23 Evans

你現在得到什麼？ –

http://jsfiddle.net/jdln/3ms5f/

我將搜索框的寬度設置爲100％，但將其放在右側填充5em的容器div中。由於集裝箱格是100％寬的，它會將按鈕敲到新的一排，但是我會用絕對定位「提起」按鈕。

當我調整窗口大小時，它似乎很好用。我認爲如果我使用em代替px的寬度，佈局會更加健壯，這意味着我必須規範文本大小。

來源

2011-09-28 10:56:23 Evans

在這裏看到：http://jsfiddle.net/chricholson/wCvVB/9/

通知我不得不從兩個輸入關閉邊界，因爲這些會加起來數量大於100％（即80％的寬度加上2像素（邊界兩側。））。您可以分別輸入79％和19％，然後嘗試放置1px邊框。

我已經把寬度都放在一個div裏面，但這可以很容易地成爲默認100％寬的body標籤。

來源

2011-09-23 11:20:51 Chris

您的解決方案唯一的問題是，我需要給按鈕一個足夠大的寬度，以使其始終足夠寬以容納文本，即使是在查看我的網站的最小設備上也是如此。如果我這樣做，這意味着在更寬的設備上，按鈕看起來很奇怪。有沒有辦法讓按鈕只佔用它需要的空間（我認爲是默認行爲），並使搜索框使用其他任何剩餘的內容？謝謝 – Evans

在這種情況下，您僅限於Andres Ilich提供的解決方案。它是相似的，但不是讓按鈕展開以適應外部容器的寬度，並且內部的按鈕保持不變。當然，問題在於，它看起來不像箱子拉伸整個寬度，所以會產生一些空白區域。 – Chris

您需要正確地包含輸入字段，並且寬度需要相對於其容器。嘗試是這樣的：

CSS

.searchbar { 
    width:100%; 
} 

.searchfield, .searchbtn { 
    float:left; 
} 

.searchfield { 
    width:70%; 
    margin-right:5%; 
} 

.searchfield input { 
    width:100%; 
} 

.searchbtn { 
    width:25%; 
}

HTML

<div class="searchbar"> 
    <div class="searchfield"> 
     <input type="text" name="Search" value="Search" /> 
    </div> 
    <div class="searchbtn"> 
     <input type="submit" value="Search" /> 
    </div> 
</div>

DEMO：http://jsfiddle.net/andresilich/pHwYG/

來源

2011-09-23 11:23:44

Mobie網站的CSS - 搜索框和按鈕的組合寬度爲100％？

回答

相關問題