內聯響應表單元素

我有一個文本輸入元件和一個我需要的是內聯和響應一個提交輸入元素。問題是，我無法找到一種方法來讓文本輸入元素變得流暢，而不必按下按鈕的位置。任何幫助，將不勝感激。內聯響應表單元素

這裏是我使用的HTML結構。

<div class="search-call-to-action"> 
    <form action="#"> 
     <input type="text" name="search" placeholder="Search charities by keyword or name..."> 
     <input class="btn btn-primary btn-large" type="submit" name="submit" value="Search"> 
    </form> 
</div>

這是我試圖實現的屏幕截圖。文字輸入需要流暢。 http://i.imgur.com/Ivty5Qq.png

來源

2013-04-01 Mike

你是什麼意思的「響應？」 –

你已經發布了你的HTML，你的CSS在哪裏？ – Adrian

@ExplosionPills文本輸入必須是流暢的，以便在視口大小改變時縮小。圍繞這個小表單的div在bootstrap.container中，所以父div將會變小。將寬度設置爲百分比似乎不起作用，因爲它會改變不能流暢的按鈕的位置。 – Mike

我提供了一個jsfiddle，其中包含有關如何實現此目的的工作演示。它使用溢出屬性。演示http://jsfiddle.net/kevinPHPkevin/vbdy9/

<form action="search.php" method="get"> 
    <input type="submit" name="search" value="Go" style="float: right" /> 
    <div style="overflow: hidden; padding-right: .5em;"> 
     <input type="text" name="term" style="width: 100%;" /> 
    </div> 
</form>

來源

2013-04-01 20:02:09 Vector

完美地工作。謝謝！ – Mike

您可以使用媒體查詢來實現這一目標。然後你應該爲每個分辨率創建查詢。示例：

@media (min-width: 320px){ 

div 
{ 
    //some propererties in ems 
}

來源

2013-04-01 19:53:41 marciano

內聯響應表單元素

回答

相關問題