CSS3：文本框中的div

Question

我有一个文本框，上面有字符限制框。 我想要的是。 要输入的文本应不超过文本框可见部分的长度。

我已经尝试过此代码。

 .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之后。

我该如何预防？

任何帮助都会很棒。

谢谢。

Answer 1

您可以输入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> 

Answer 2

 .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> 

您要寻找的是一样的吗？

希望这可以帮助。