兩個並排元素，一個未知/可變寬度，另一個填充水平空間的其餘部分？

Question

我正在構建HTML/CSS/JS（Angular）中的視頻遊戲UI。這個問題特別與UI的聊天組件有關，聊天組件是一個帶有輸入字段的聊天框，並在其下面的同一行上發送按鈕。

對輸入的簡化的標記，並提交這個樣子的（除去所有的角標記）：

<div class="chat-controls"> 
    <form class="chat-form"> 
      <input type="text" class="chat-input" /> 
    </form> 
    <a href class="chat-send btn">Send</a> 
</div> 

這裏是我試圖解決的問題：我們的遊戲本地化爲許多不同的語言，意思是發送按鈕的水平尺寸因語言而異，取決於翻譯。因此我無法預測Send按鈕的寬度。我希望文本輸入框在發送按鈕旁邊水平填充剩餘空間（固定爲.chat-controls寬度 - 變量.chat-send寬度= .chat-input寬度）。

棘手的部分是我試圖在純CSS中做到這一點，而不使用JS。我知道我可以用JS測量.chat-send，並相應地分配.chat-input的寬度（或者做一些事情，比如將CSS類添加到表示語言版本的祖先，並對CSS中每種語言的值進行硬編碼），但是最靈活和可維護的解決方案將是純粹的CSS。

這不能實現浮動發送按鈕的權利，因爲文本輸入然後要麼流動發送按鈕下面，要麼我需要知道發送按鈕的寬度分配.chat-input正確的填充補償。如果calc()可以預測同級元素的寬度，這將是微不足道的，但唉它不能。我也用flexbox玩了一段時間，這似乎不適合這種情況。我目前的解決方法是將發送按鈕設置爲當前最大尺寸的寬度（俄語，這大約是英文「Send」長度的兩倍），但這看起來不太好。

我的問題是：是否有任何合理的方式在純CSS中做到這一點，還是我只需要在JS中做到這一點？請注意，瀏覽器兼容性不是問題，因爲這是通過Chromium嵌入式框架實現的，因此幾乎支持所有功能。

Answer 1

您可以使用display與flex或table。

<h1>display:flex;</h1> 
<div class="chat-controls"> 
    <form class="chat-form"> 
      <input type="text" class="chat-input" /> 
    </form> 
    <a href class="chat-send btn">Send</a> 
</div> 
<h1>display:table;</h1> 
<div class="chat-controls bis"> 
    <form class="chat-form"> 
      <input type="text" class="chat-input" /> 
    </form> 
    <a href class="chat-send btn">Send</a> 
</div> 

與此下面的CSS測試兩個版本

.chat-controls { 
    display:flex; 
} 
.chat-form { 
    flex:1; 
} 
.chat-input , .bis .chat-form{ 
    width:100%; 
} 
.btn { 
    padding:0 1em; 
} 
.bis { 
    display:table; 
    width:100%; 
} 
.bis .chat-form, .bis .btn { 
    display:table-cell; 
} 

你可以用它在這裏在線玩：http://codepen.io/gc-nomade/pen/MYmVZM

float也是，如果你不介意把發送鏈接的選項/ HTML按鈕（鏈接的演示中的第三個示例）。