問題系統的CSS輸入字段和按鈕位置

Question

我有一個問題定位具有固定「外邊距」的div內的具有固定大小的可變大小的輸入字段和張貼按鈕。

我提供了一個jfiddle example，您可以在其中看到錯誤的版本。

在這裏你可以看到我的問題：

版本錯誤：Actual website

「應該成爲的」 版本：This is what it should look like

文字描述：

，你可以請參閱第二張圖片，底部始終位於底部對我來說很重要...

.submitform { 
    display: block; 
    position: fixed; 
    bottom: 0; 
    ...more on jfiddle... 
} 

...和後按鈕總是在右邊。底部部分應該與左上部和右部具有相同的間隙。困難的是，輸入字段應該具有靈活的大小，但應該佔用左側空白和後續按鈕之間的所有空間。

我希望你能幫助我，因爲在網上嘗試和搜索的時間沒有給我帶來正確的解決方案。

Answer 1

試試這個：http://jsfiddle.net/jgHAA/1/

.submitform { 
    background: white; 
    display: block; 
    position: fixed; 
    /* Instead of applying margin and width, simply set the bottom, left, 
     and right properties to 13px */ 
    bottom: 13px; 
    left: 13px; 
    right: 13px; 
    /*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/ 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 
    padding: 7px; 
    overflow:hidden; 
    box-sizing:border-box; 
} 

有文本框填寫的寬度，你可以使用同樣的技術：http://jsfiddle.net/jgHAA/2/

.submitform #post_input { 
    display: block; 
    font-size: 18px; 
    border: none; 
    outline: none; 
    padding: 3px; 
    /* set left and right, and z-index to make it appear behind the button.*/ 
    left:7px; 
    right:7px; 
    position:absolute; 
    z-index:-1; 
}