部隊空間

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>