小编RO6*_*635的帖子

垂直对齐文本列表上的冒号

我正在做一个网站项目，使用 Materialise 框架。

有一行文本我想垂直对齐所有冒号。这是文本的示例：

Project:Intimate House  
Location : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area : 160 sqm  
Building Area : 210 sqm  
Design Phase : 2016 
Construction Period : April 2016 - July 2017

Run Code Online (Sandbox Code Playgroud)

这是我想要的垂直对齐冒号的结果

Project                : Intimate House  
Location               : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area              : 160 sqm  
Building Area          : 210 sqm  
Design Phase           : 2016 
Construction Period    : April 2016 - July 2017

Run Code Online (Sandbox Code Playgroud)

下面是我尝试创建的代码（https://codepen.io/bukuchaga/pen/xJNdeq）HTML：