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> 

您要尋找的是一樣的嗎？

希望這可以幫助。