在文本列表上垂直对齐冒号答案

【问题标题】：Vertical align colon on list of text在文本列表上垂直对齐冒号
【发布时间】：2018-08-15 09:51:27
【问题描述】：

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

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

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：

                    <h4><b>Intimate House</b><br></h4>
                    <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>

根据我之前的研究，我发现了一个可能与我的问题相似的问题。(Vertical align colon with numbers)

问题是在我尝试应用答案后，它仍然无法处理我的代码，而是让我的文本行变得不合适，我已经尝试了几个其他方法还是不行。

谢谢你。

【问题讨论】：

嗨@Kevin。请将您的代码缩减为minimal reproducible example。您的问题中有很多不相关的 HTML 和 JavaScript，因此很难看到您正在谈论的元素。
@Turnip 好的，谢谢你通知我。让我先解决它。
还要注意p元素不能包含ul...这是无效的HTML。
相关：stackoverflow.com/questions/8994516/…

标签： html css materialize

【解决方案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>

【讨论】：

【解决方案2】：

我建议从 HTML 中删除冒号并改用 ::after 伪元素。

.alignMe b {
  display: inline-block;
  width: 50%;
  position: relative;
  padding-right: 10px; /* Ensures colon does not overlay the text */
}

.alignMe b::after {
  content: ":";
  position: absolute;
  right: 10px;
}

<ul class="alignMe">
  <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>

【讨论】：

是的，我刚才注意到了，如果我不应该再放一个冒号，如果我放 ::after 伪元素
感谢您的回答，现在效果更好了。前段时间我想用inline-block，但不知道你可以用width设置空间，可能这就是我没有找到解决方案的原因。

【解决方案3】：

一种可行的方法是将min-width 设置为<b> 标签并在其后添加一个冒号。简单例子：

ul.info-list {
  list-style-type: none;
}
ul.info-list li b {
  position: relative;
  display: inline-block;
  min-width: 144px;
  margin-right: 4px;
}
ul.info-list li b:after {
  content: ":";
  position: absolute;
  right: 0;
}

<ul class="info-list">
  <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>

【讨论】：

我明白了，这很简单，但对于我想要的结果来说已经足够了。让我先试试。