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

Question

我正在做一个网站项目，使用 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

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

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

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

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

根据我之前的研究，我发现了一个可能与我的问题相似的问题。（将冒号与数字垂直对齐）

问题是在我尝试应用答案之后，它仍然无法在我的代码上工作，而是它使我的文本行变得不合适，并且我尝试了其他几种方法但仍然无法工作。

先谢谢你了。

Answer 1

将冒号移到后面并b使用 CSS-Tables

ul {
  list-style: none;
  display: table;
}

li {
  display: table-row;
}

b {
  display: table-cell;
  padding-right: 1em;
}

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