如何把div中的文本和span右对齐？

前端开发 2026-07-07

我想把剩余的计数器对齐到div-box的右边，但我希望字符计数器仍然保持在左边。我该如何实现？以下是我当前已有的代码。

textarea {
  width: 350px;
  height: 150px;
}

p {
  display: inline-block;
}

.right {
  text-align: right;
}

<div>
  <textarea id="input" placeholder="Type some text here..." maxlength="423"></textarea><br>
  <p>Characters: <span id="characters">0</span></p>
  <p class="right">Remaining: <span id="remaining">0</span></p>
</div>

解决方案

你需要在你的DOM中添加一个容器来实现Flexbox：

<div class="container">
            <p class="left">Characters: <span id="characters">0</span></p>
            <p class="right">Remaining: <span id="remaining">0</span></p>
</div>

接着，要把剩余的计数器对齐到宽度为350px的 div-box的右侧，你需要考虑使用inline-flex。

.container {
    display: inline-flex;
    width: 350px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

下面是可运行的代码片段：

textarea {
    width: 350px;
    height: 150px;
}

p {
    display: inline-block;
}

.right {
    text-align: right;
}

.container {
    display: inline-flex;
    width: 350px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

<div>
        <textarea id="input" placeholder="Type some text here..." maxlength="423"></textarea><br>
        <div class="container">
            <p class="left">Characters: <span id="characters">0</span></p>
            <p class="right">Remaining: <span id="remaining">0</span></p>
        </div>
</div>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。