情況：我正在嘗試創建一個動態輸入框，我可以在其中將單詞添加到框中，讓它們單獨顯示在氣泡中。為此，我嘗試將 div 容器 ( ) 與輸入欄位 () 并排放置，因此當用戶添加一個元素時，它會將其放入并排顯示的 div 容器中。如果您對我想要實作的目標感到困惑，我發布了一個 jsfiddle 以供參考。
我的問題：當我將一個元素添加到 div 容器時，它會將容器的大小擴展到超過我嘗試為其分配的最大大小。我為包含所有內容的父 div 設定了特定大小。我認為我的問題在于，輸入框使用 width=100% 參考父 div，盡管并排添加新元素，但它不會改變。如何讓輸入文本框動態調整自身大小以填充左邊的空間而不是更多？
我的目標：弄清楚當同級元素并排添加到父容器時，如何使輸入框動態調整大小以適應父容器。
任何幫助將不勝感激。
代碼片段：
$('.emotionsInput').keypress(function (e) {
var key = e.which;
if (key == 13)
{
var inputWord = $(this).val();
var currentCell = $(this);
createTag(currentCell);
}
})
function createTag(currentCell)
{
var parentCell = currentCell.parent()
var inputWord = currentCell.val();
currentCell.val("");
var newTagHTML = '<span >' inputWord '</span>';
parentCell.children(".emotionTagsDiv").append(newTagHTML);
}#testTagBox > span > span {
border-color:transparent;
box-shadow:0 0 0 2px #000;
border-radius: 40px;
padding:5px;
background-color: white;
width: 100%;
display:flex; /* changed this here, it was inline*/
}
#testTagBox > span {
padding: 0.67rem 0.5rem;
width: 100%;
display:flex; /* changed this here, it was inline-block */
}
#testTagBox {
width: 30rem;
padding-right:1.8rem;
}
.emotionsDiv {
display: flex; /* changed this here, it was inline-block */
width: 100%;
white-space: nowrap;
}
.emotionTagsDiv {
flex: 1 1 auto; /* added this here */
white-space: nowrap;
}
.emotionTag {
display: inline-block;
padding-right: 1em;
}
input {
font-family: Arial;
display: flex; /* changed this here */
flex: 20 1 auto; /* added this so that it prioritizes shrinking this element.*/
width: 100%;
}
input:focus {
outline: none;
}<html lang="en">
<body>
<div id="testTagBox">
<span>
<span>
<div class="emotionsDiv">
<div class="emotionTagsDiv">
</div>
<input class="emotionsInput" placeholder="type and press enter here" type="text" value="">
</div>
</span>
</span>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="testapp.js" type="text/javascript" ></script>
</body>
</html>如您所見，當您添加一個元素時，當我嘗試將輸入框固定在右側并減小左側的大小時，整個容器都會調整大小，以便容器保持相同的大小并且所有內容都適合。
uj5u.com熱心網友回復：
寬度如果輸入可以通過改變的顯示特性被調整.emotionTagsDiv，以flex
$('.emotionsInput').keypress(function (e) {
var key = e.which;
if (key == 13)
{
var inputWord = $(this).val();
var currentCell = $(this);
createTag(currentCell);
}
})
function createTag(currentCell)
{
var parentCell = currentCell.parent()
var inputWord = currentCell.val();
currentCell.val("");
var newTagHTML = '<span >' inputWord '</span>';
parentCell.children(".emotionTagsDiv").append(newTagHTML);
}#testTagBox > span > span {
border-color:transparent;
padding:5px;
background-color: white;
width: 100%;
}
#testTagBox > span {
padding: 0.67rem 0.5rem;
width: 100%;
}
#testTagBox {
max-width: 30rem;
padding-right:1.8rem;
}
.emotionsDiv {
display: flex;
width: 100%;
box-shadow:0 0 0 2px #000;
padding: .5rem;
border-radius: 40px;
}
.emotionTagsDiv {
display: inline-block;
white-space: nowrap;
}
.emotionTag {
display: inline-block;
padding-right: 1em;
}
input {
/* border-style: hidden; */
font-family: Arial;
display: inline-block;
width: 100%;
min-width: 50px;
}
input:focus {
outline: none;
}<html lang="en">
<body>
<div id="testTagBox">
<span>
<span>
<div class="emotionsDiv">
<div class="emotionTagsDiv">
</div>
<input class="emotionsInput" placeholder="type and press enter here" type="text" value="">
</div>
</span>
</span>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="testapp.js" type="text/javascript" ></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404701.html
標籤：
上一篇：移動引導程式中的導航欄不起作用