CSS：左对齐标签，右对齐

I have a text like this :

我有这样的文字:

AAA : aaaaaaaaaaaaaaaaaa
B : bbbbb
CCCCC : cccccccc

I want it to be :

我希望它是:

AAA   : aaaaaaaaaaaaaaaaaa
B     : bbbbb
CCCCC : cccccccc

How can I do this with CSS ?

我怎么能用CSS做到这一点?

Edit : Add code, although I find it useless

编辑:添加代码,虽然我发现它没用

<div>
    AAA : aaaaaaaaaaaaaaaaaa
    <br>B : bbbbb
    <br>CCCCC : cccccccc
</div>

2 个解决方案

#1

You've to add some element that wraps the text inside it and then you can use styles on the wrapper to set the width of the text. I've used span.

您需要添加一些包含文本内部元素的元素,然后您可以在包装器上使用样式来设置文本的宽度。我用过span。

div span:first-child {
  float: left;
  width: 10%;
}

<div>
  <div><span>AAA</span><span>: aaaaaaaaaaaaaaaaaa</span>
  </div>
  <div><span>B</span><span> : bbbbb</span>
  </div>
  <div><span>CCCCC</span><span>: cccccccc</span>
  </div>
</div>

#2

Expanding on Tushar's post, if you need a flexible width, this could be an alternative

扩展到Tushar的帖子,如果你需要灵活的宽度,这可能是另一种选择

div {
    display: table;
}
div div {
    display: table-row;
}
div span {
    display: table-cell;
}

<div>
    <div>
        <span>AAA</span><span>: aaaaaaaaaaaaaaaaaa</span>
    </div>
    <div>
        <span>B</span><span> : bbbbb</span>
    </div>
    <div>
        <span>CCCCC</span><span>: cccccccc</span>
    </div>
</div>

#1