我有一个文本框,上面有字符限制框。我想要的是。要输入的文本应达到文本框可见部分的长度。
我试过这段代码。
.add_caption_div input[type="text"] {
border: thin #dee5e7 solid;
width: 190px;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: inline-block;
float: left;
padding: 7px 12px;
}
.add_caption_div .image_galley_char_limit_div {
display: inline-block;
height: 31px;
width: 50px;
font-size: 9px;
color: #999999;
position: relative;
z-index: 100001;
background:#f6f8f8;
top:-6px;
right:51px;
}
.add_caption_div .form-control:focus {
border: thin #66afe9 solid;
}
.add_caption_div span {
position: relative;
top: 10px;
}
<div class="add_caption_div" >
<input type="text" class="form-control" placeholder="Enter Caption">
<div class="image_galley_char_limit_div text-center">
<span> 0/30</span>
</div>
</div>
当我输入输入时,它会在character_limit_div后面。
我该如何预防?
任何帮助都会很棒。
谢谢。
.add_caption_div {
position: relative;
width: 190px;
}
.add_caption_div input[type="text"] {
border: thin #dee5e7 solid;
width: 190px;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: inline-block;
float: left;
padding: 7px 12px;
}
.add_caption_div .form-control {
padding-right: 60px !important;
}
.add_caption_div .image_galley_char_limit_div {
display: inline-block;
height: 31px;
width: 50px;
font-size: 9px;
color: #999999;
position: absolute;
z-index: 100001;
top: 1px;
right: -73px;
background:#f6f8f8;
}
.add_caption_div .form-control:focus {
border: thin #66afe9 solid;
}
.add_caption_div span {
position: relative;
top: 10px;
}
<div class="add_caption_div" >
<input type="text" class="form-control" placeholder="Enter Caption">
<div class="image_galley_char_limit_div text-center">
<span> 0/30</span>
</div>
</div>
这是您要找的吗?
希望这有帮助。
你可以为输入提供padding-right
,如下所示:
.add_caption_div input[type="text"] {
border: thin #dee5e7 solid;
width: 190px;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: inline-block;
float: left;
padding: 7px 12px;
}
.add_caption_div .image_galley_char_limit_div {
display: inline-block;
height: 31px;
width: 50px;
font-size: 9px;
color: #999999;
position: relative;
z-index: 100001;
background:#f6f8f8;
top:-6px;
right:51px;
}
.add_caption_div .form-control:focus {
border: thin #66afe9 solid;
}
.add_caption_div span {
position: relative;
top: 10px;
}
.form-control{
padding-right: 70px !important;
}
<div class="add_caption_div" >
<input type="text" class="form-control" placeholder="Enter Caption">
<div class="image_galley_char_limit_div text-center">
<span> 0/30</span>
</div>
</div>