当项目文本换行时，如何跨列垂直对齐列表项目？

Question

对于无序列表元素，是否可以在换行文本下方添加一些 space 以便每个项目符号都完美对齐？

.feature-list {
  /*   list-style: none; */
  columns: 2;
}

.feature-list .feature-item {
  font-size: 12px;
  max-width: 120px;
}

.feature-list .feature-item i {
  padding-right: 6px;
}

<ul class="feature-list">
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> 10-Domains Limit
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Unlimited Subdomain Subdomain Subdomain
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Database Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> DNS Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> File Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Web Application Manager
  </li>
</ul>

预期输出：

Answer 1

这可以通过实施 flexbox 包装来完成。请注意，没有明确的列计数规则。列数由项目的宽度暗示（此处计算扣除列间隙）。

见https://css-tricks.com/snippets/css/a-guide-to-flexbox

需要注意的是，项目现在排列成行。类似的包装可以应用于柱状排序，但这需要固定的列表高度，这将是一种脆弱的方法。更改项目数、字体大小等会破坏布局。

.feature-list {
  display: flex;
  flex-wrap: wrap; 
  column-gap: 40px;
}

.feature-list .feature-item {
  flex-basis: calc(50% - 40px);
  font-size: 12px;
}

<ul class="feature-list">
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> 10-Domains Limit 10-Domains Limit 10-Domains Limit 10-Domains Limit 10-Domains Limit 10-Domains Limit 10-Domains Limit
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Unlimited Subdomain Subdomain Subdomain
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Database Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> DNS Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> File Manager
  </li>
  <li class="feature-item">
    <i class="far fa-check-circle text-fountain"></i> Web Application Manager
  </li>
</ul>

当项目文本换行时，如何跨列垂直对齐列表项目？

How can I vertically align list items across columns when item text wraps?

html

css

html-lists