部队空间

Question

我已经计数器放置在文本区域的右上角用CSS：

position: absolute; 
    @include right(pxToRem(5)); 
    bottom: pxToRem(45); 
    font-family: $font-family-regular; 
    color: $text-color-grey-8; 
    font-size: $font-size-12; 

与HTML：

<textarea 
placeholder{{translationService.translate('REPORT_ADD_COMMENT')}}" 
ngControl="comment" #comment="ngForm" 
[attr.maxlength]="maxLengthReportPost"></textarea> 
<span class="form__textarea-counter">{{showCharCounter()}}</span> 

CSS的textarea的：

min-height: pxToRem(80); 
line-height: pxToRem(21); 
padding-top: pxToRem(3); 
padding-right: pxToRem(13); 

作为开始打字和接近柜台的结果是非常接近柜台甚至在它作为

我怎么能强迫spsce计数器和文本之间的

请不jQuery的

Answer 1

你可能会发现这是很有帮助的，我知道这是不是100％，充分证明，但可能是它可以帮助你

textarea{ 
 
    resize: none; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    padding-right: 20px; 
 
} 
 
span{ 
 
    position: absolute; 
 
    bottom: 5px; 
 
    right: -15px; 
 
} 
 
.textarea-holder{ 
 
    position: relative; 
 
    width: 200px; 
 
}

<div class="textarea-holder"> 
 
    <textarea> 
 
    </textarea> 
 
    <span>11</span> 
 
</div>

Answer 2

经过多次意见

完全改变了答案：

不要使用position: absolute的柜台，但要display: inline;和float left代替，并删除容器的heigth，并把它放入容器中的最后一个元素：

.x1 { 
 
    position: relative; 
 
    background: #ccf; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    border: 1px solid #222; 
 
} 
 
.x2 { 
 
    float: right; 
 
    display: inline; 
 
    background: #fff; 
 
    width: 50px; 
 
    height: 20px; 
 
    border-left: 1px solid #555; 
 
    padding-left: 10px; 
 
}

<div class="x1">asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu kj l asd asd asd asd sd asd asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu kj l asd kja bsd lkj zg kjh iuz kj huz j hjg iuz kjh kuz j hjg iuz kjh ku jhg kjh lkj iuz jh kjh iu 
 
    <div class="x2"> 
 
    counter 
 
    </div> 
 
</div>