如何分配空間到一個文本儘可能多，然後其餘的右側textInput

-2

我有一個Text組件和一個TextInput在一排旁邊，我什麼Text獲得空間儘可能多需要然後保留TextInput的設備寬度的其餘部分。我該怎麼做flexbox？或任何其他工具？ Dimensions是否給我Text的長度，以便我可以使用它來分配文本？如何分配空間到一個文本儘可能多，然後其餘的右側textInput

來源

2017-07-19 farmcommand2

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

問題是，當有人不知道如何做某事時，期待那個人提供代碼很有趣，就好像我知道該怎麼做，我可以編碼！在你看到一個沒有代碼的問題後立即給出-1，最好給這個人一些提示！ – farmcommand2

如果你知道文本的寬度，你可以在css中使用'calc'方法。考慮到你不知道文本的寬度。你將需要使用javascript來獲取容器的總寬度，然後獲取文本元素的寬度。然後，您可以將輸入的寬度設置爲totalWidth - texWidth。 –

你應該能夠從下面的代碼片段中得到正在發生的事情的要點。根據您的需求調整。

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>

來源

2017-07-19 16:41:59

如何分配空間到一個文本儘可能多，然後其餘的右側textInput

回答

相關問題