Question

我有一个带有字符限制框的文本框。我想要的是。要输入的文本应该高达文本框可见部分的长度。

我试过这段代码。

＆＃13;

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

＆＃13;

SELECT  /*+ MAPJOIN(Table1) */ COLUMN
FROM Table1 JOIN Table2
ON Table1.key = Table2.key

＆＃13;

当我输入输入时，它会落后于character_limit_div。

我该如何预防？

任何帮助都会很棒。

谢谢。

Answer 1

你可以给padding-right输入，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。

CSS3：文本框上的div

2 个答案: