Question

我有这样的文字：

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

我希望它是：

{{1}}

如何使用CSS执行此操作？

编辑：添加代码，虽然我发现它无用

{{1}}

Answer 1

您必须添加一些包含文本内容的元素，然后您可以在包装器上使用样式来设置文本的width。我使用了span。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

CSS：左对齐标签，右对齐

2 个答案: