[英]How to make the text box grow till the width of its parent div
<div class="mail-holder">
<ul class="multi-input">
<li class="temp-value">
<input type="text" placeholder="Email" class="mail-input">
</li>
</ul>
<div class="button-holder">
<button type="button" class="btn btn-success">Share Users</button>
<button type="button" class="btn-cancel">Cancel</button>
</div>
</div>
.mail-holder
{
margin: 0px;
clear: both;
position: relative;
}
.temp-value
{
width: auto;
min-width: 90px;
max-width: 100%;
height: 26px;
width: auto;
float: left;
display: inline-block;
}
.mail-input
{
outline:none !important;
border: none;
text-align: left;
padding-left: 4px;
padding-top:2px;
resize:none;
background: none;
}
.button-holder
{
margin-top: 20px;
clear: both;
}
.button-holder .btn-cancel
{
color: #7d7d7d;
margin-left: 20px;
vertical-align: middle;
border: none;
background: none;
}
.multi-input
{
list-style-type: none;
color: #83a3b8;
border: 1px solid #dedede;
width: 100%;
max-height: 80px;
overflow-y:auto;
margin-bottom: 0px;
display: inline-block;
padding: 7px 0px 5px 0px;
}
.temp-li
{
float: left;
display: inline-block;
margin: 0px 0px 3px 3px;
background-color: #def2ff;
padding: 0px 3px;
border-radius: 5px;
border: 1px solid #bfd7e7;
}
JQUERY
$(".mail-input").keyup(function (e) {
var value = $(".mail-input").val();
if (e.keyCode == 13) {
if (value.length == 0) {
return false;
} else {
$('.multi-input li.temp-value').before('<li class="temp-li">' + value + '<span class="close-btn">x</span></li>');
$('.mail-input').val('').focus();
}
} else if (e.keyCode == 8) {
if (value.length == 0) {
$('.multi-input li:last-child').prev().remove();
} else {
return false;
}
}
});
$('.btn-cancel').click(function () {
$('.auto-gen li').remove();
$('.multi-input li').not('li:last').remove();
$('.mail-input').val('').focus();
});
$('body').on('click', '.close-btn', function () {
$(this).parent().remove();
});
我需要將文本框擴展到父div寬度的末尾。 一旦文本的值溢出了父級的寬度。 它應該細分到下一行。 我所做的一切就像輸入標簽一樣,它有助於存儲輸入的值並存儲在li中。 提前致謝。
在這里,我給出了文本框全寬的解決方案。 我不確定要分解清單。
.temp-value
{
width: auto;
min-width: 90px;
max-width: 100%;
height: 26px;
width: 100%;
float: left;
display: inline-block;
}
.mail-input
{
outline:none !important;
border: none;
text-align: left;
padding-left: 4px;
padding-top:2px;
resize:none;
background: none;
width:100%;
box-sizing:border-box;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.