两个并排的元素，一个未知/可变宽度，另一个填充水平空间的其余部分

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>

这就是我试图解决的问题：我们的游戏针对许多不同的语言进行了本地化，这意味着"发送"按钮的水平大小因翻译而异。 因此，我无法预测"发送"按钮的宽度。 我希望文本输入框水平填充发送按钮旁边的其余空间（固定.chat-controls宽度 - 可变.chat-send宽度 = .chat-input宽度）。

棘手的部分是我尝试在不使用 JS 的情况下在纯 CSS 中执行此操作。 我知道我可以用 JS 测量.chat-send并相应地分配.chat-input的宽度（或者做一些事情，比如向表示语言版本的祖先添加一个 CSS 类，并在 CSS 中对每种语言的值进行硬编码），但最灵活和可维护的解决方案是纯 CSS。

这不能通过向右浮动发送按钮来实现，因为文本输入要么在发送按钮下方流动，要么我需要知道发送按钮的宽度以在.chat-input上分配右填充以进行补偿。 如果calc()可以预测同级元素的宽度，那将是微不足道的，但可惜它不能。 我也玩了一段时间的flexbox，它似乎不适合这种情况。 我目前的解决方法是使发送按钮的宽度达到当前最大大小（俄语，大约是英语"发送"长度的两倍），但这看起来不太好。

我的问题是：是否有任何合理的方法可以在纯 CSS 中执行此操作，或者我只需要在 JS 中执行此操作？ 请注意，浏览器兼容性不是问题，因为它是通过Chromium Embedded Framework实现的，因此几乎支持所有内容。

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

如果您不介意将发送链接/按钮放在 HTML 前面，float也是一个选项（演示链接中的第三个示例）。