如何根据需要为文本分配空间，然后将其余空间分配给右侧 textInput答案

【问题标题】：how to allocate space to a text as much as it needs and then the rest to the right side textInput如何根据需要为文本分配空间，然后将其余空间分配给右侧 textInput
【发布时间】：2017-12-24 22:37:27
【问题描述】：

我有一个Text 组件和一个TextInput 并排在一行上，我用Text 来获得所需的空间，然后将设备的其余宽度留给@987654325 @。我怎样才能用flexbox 做到这一点？或任何其他工具？ Dimensions 是否给了我 Text 的长度，以便我可以使用它来分配给文本？

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
问题是当某人不知道怎么做某事时，期望那个人提供代码是很有趣的，好像我知道怎么做我可以编码一样！！！在看到没有代码的问题时立即给出 -1 之前，最好给这个人一些提示！
如果你知道文本的宽度，你可以使用css中的`calc`方法。考虑到您不知道文本的宽度。您将需要使用 javascript 来获取容器的总宽度，然后是文本元素的宽度。然后，您可以将输入的宽度设置为 totalWidth - texWidth。
@KyleRichardson 确实感谢您的帮助，您能否用代码添加更多解释并将其发布为答案，再次感谢

标签： css reactjs react-native flexbox

【解决方案1】：

您应该能够从下面的 sn-p 中了解正在发生的事情的要点。根据您的需要进行调整。

var containerWidth = document.getElementById("container").offsetWidth;
var labelWidth = document.getElementById("label").offsetWidth;
var inputWidth = containerWidth - labelWidth - 1 + "px"
document.getElementById("input").setAttribute( "style", `width: ${inputWidth}` );

#container {
  width: 300px;
}
#label {
  float: left;
}
#container, #input, #label {
  box-sizing: border-box;
}

<div id="container">
  <label for="input" id="label">Label</label>
  <input id="input" type="text" />
</div>

【讨论】：