下圖是該站點的功能影像。在“輸入代碼”列中，用戶可以使用 TagsInput 輸入資料。我想稍微改進一下功能，以便短標簽顯示在一行上。我知道您可以應用“行內”，但是長標簽超出了模態視窗的邊界。
.tag {
display: flexbox;
align-items: center;
margin: 5px 0;
margin-right: 5px;
padding: 0 5px;
border: 1px solid black;
border-radius: 5px;
color: black;
overflow: hidden;
text-overflow: ellipsis;
max-width: fit-content;
white-space: nowrap;
position: relative;
}
我已經嘗試了很多選項，并且在stackoverflow上查看了很多答案，但沒有達到結果。也許你可以給我一個提示。
uj5u.com熱心網友回復：
如果您添加更多代碼會很好。我猜你的tag課是關于孩子的？您需要的是將父容器放入 flex 中。
<body>
<div class="tag-container">
<div class="tag">100<div class="del">x</div></div>
<div class="tag">200<div class="del">x</div></div>
<div class="tag">300<div class="del">x</div></div>
<div class="tag">400<div class="del">x</div></div>
<div class="tag">500<div class="del">x</div></div>
<div class="tag">600<div class="del">x</div></div>
<div class="tag">700<div class="del">x</div></div>
<div class="tag">800<div class="del">x</div></div>
<div class="tag">800<div class="del">x</div></div>
<div class="tag">1000<div class="del">x</div></div>
<input
class="input"
placeholder="Enter a code"
/>
</div>
</body>
.tag-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 200px; /* Exemple width */
border: 1px solid black;
}
.tag {
text-align: center;
margin: 5px 0;
margin-right: 5px;
padding: 0 5px;
border: 1px solid black;
border-radius: 5px;
color: black;
}
.del {
border: none;
border-radius: 30%;
background-color: transparent;
cursor: pointer;
color: black;
margin-top: -2px;
}
.input {
width: 100%;
min-width: 50%;
border: none;
margin: 5px;
border-bottom: 1px solid black;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/486093.html
標籤：javascript css 反应 引导标签输入