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

【问题标题】：How can I vertically align list items across columns when item text wraps?当项目文本换行时，如何跨列垂直对齐列表项？
【发布时间】：2022-01-10 00:26:02
【问题描述】：

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

.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>

预期输出：

【问题讨论】：

标签： html css html-lists

【解决方案1】：

这可以通过实现弹性盒包装来完成。请注意，没有明确的列计数规则。列数由项目的宽度隐含（此处计算以扣除列间距）。

见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>

【讨论】：