CSS - 動態長度的文本輸入框和一個行提交按鈕

我：CSS - 動態長度的文本輸入框和一個行提交按鈕

<div> 
    <input id="input" type="text" /> 
    <button id="submit">submit</button> 
</div>

這給了我這個 enter image description here

如果我用鼠標拖動它擴大了主面板光標寬新的空間是空的：

enter image description here

我想的是，<input type="text" />填充整個橫向的新空間，但提交按鈕保持在同一行。

我厭倦了使用<input style="width:100%" type="text"/>但隨後填滿整個行和按鈕出現在下一行提交：

enter image description here

我也試過一個表作爲在該線程中提到： Liquid textfield width

結果是它的作用「有點」，提交按鈕與輸入文本重疊，右側的某個空間始終爲空： enter image description here

有人可以幫我一個代碼的想法填補整個空間，除了（靜態）大小的提交按鈕。

謝謝！

來源

2013-06-18 Viktor Carlson

您鏈接到的「表格」方法可以正常工作，但是您在輸入元素上缺少一個關鍵屬性：方塊大小。

http://cssdeck.com/labs/sbffl3l2

<div class="foo"> 
    <div class="bar"><input type="text"></div> 
    <div class="bar"><input type="submit"></div> 
</div>

.foo { 
    display: table; 
    width: 100%; 
} 

.bar { 
    display: table-cell; 
} 

.bar:first-child, input[type="text"] { 
    width: 100%; 
} 

input { 
    box-sizing: border-box; /* this is the key */ 
}

前綴可能需要：http://caniuse.com/#feat=css3-boxsizing

來源

2013-06-18 17:33:01 cimmanon

完美的作品，沒有重疊 –

我相信你可以這樣做：

<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />

這是不可取的做內聯樣式雖然。

編輯：請確保您還定義了一個固定的寬度爲按鈕

來源

2013-06-18 17:21:28 xsearingheaven

定義一個固定的寬度與文本元素是自討苦吃（當按鈕包含文本的長度不同，會發生什麼，這可能成爲一個多語種網站）。 'calc（）'功能在移動設備上不被很好的支持，如果不考慮的話，這可能是災難性的。 – cimmanon

爲什麼不給70％的輸入和20％，以按鈕的寬度？

來源

2013-06-18 17:23:53 tornados

CSS - 動態長度的文本輸入框和一個行提交按鈕

回答

相關問題