保持文本字段和按鈕內聯響應

Question

嗨我想保持此文本框並提交按鈕在同一行。而我只是想保留提交按鈕在右側，佔用小寬度和其餘的寬度將被文本字段佔用。

我試圖解決的問題是，我希望這個工作很好響應。以便在拖動屏幕時調整文本字段的寬度。

下面是HTML：

<form class="form-inline event-questions"> 
    <div class="event-questions-field"> 
     <input class="form-control" placeholder="Ask a question..." style="width: 100%" type="text"> 
    </div> 
    <button class="btn btn-danger question-submit" type="submit" value="Submit">SUBMIT</button> 
</form> 

CSS：

.event-questions { 
    display: inline-block; 
    width: 100%; 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.event-questions .question-submit.btn { 
    color: white; 
    border-radius: 0px; 
    font-weight: bold; 
    font-size: 15px; 
    height: 35px; 
    margin-top: -3px; 
    padding: 6px 18px; 
} 

.event-questions .question-submit.btn .event-questions { 
    display: inline-block; 
    width: 100%; 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.event-questions .question-submit.btn .event-questions .event-questions-field { 
    width: 89%; 
    display: inline-block; 
} 

Answer 1

可以浮動兩個項目離開了。該按鈕具有固定的寬度（100px），div的寬度用calc計算。這裏有一些calc的例子。 Calc不適用於所有瀏覽器，請查看caniuse.com以查看您的首選瀏覽器是否受支持。這是我的solution in codepen。

CSS：

.event-questions { 
    width: calc(100% - 10px); 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.event-questions .question-submit.btn { 
    color: white; 
    border-radius: 0px; 
    font-weight: bold; 
    font-size: 15px; 
    height: 35px; 
    margin-top: -3px; 
    padding: 6px 18px; 
    float: left; 
    width: 100px; 
} 

.event-questions .event-questions-field { 
    float: left; 
    /* 100px of button width */ 
    width: calc(100% - 100px); 
}