UL CSS 列 - 如果多行，则对齐列高以匹配

Question

我目前正在使用 CSS 列，为无序列表创建 2 列布局。 代码如下：

.HTML

<div class="meta-data">
<ul> 
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here </li>        
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
</ul>
</div>

.CSS

.meta-data ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}

这工作正常。但是，如果任何 li 内容换行到 2 行或更多，它会抛弃第 2 列项目符号点，因此它们不会全部水平排列......

例如：

Case Studies:  This goes onto       Value:  Value Here
two lines
Programme Duration:  Duration here.
Sector:  Sector here. 
Current Status:  Current Status here.
Client:   Client Here

这看起来很乱。

我宁愿它显示为：

Case Studies:  This goes onto       Value:  Value Here
two lines
Sector:  Sector here.               Programme Duration:  Duration here.
Client:   Client Here               Current Status:  Current Status here.

这是否很容易通过 CSS 列设置来实现，或者我需要以差异方式重新编码？

Answer 1

我没有看到使用列属性执行此操作的方法，您可以使用 css 网格

.meta-data ul {
display:grid;
grid-template-columns: 300px 300px;
grid-column-gap:10px;
}

<div class="meta-data">
<ul> 
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here Case Study HereCase Study</li>        
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here  </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here         </li>
</ul>
</div>