网格中的响应式项目符号列表答案

【问题标题】：Responsive bullet list in a grid网格中的响应式项目符号列表
【发布时间】：2019-08-01 10:46:56
【问题描述】：

我正在尝试实现这样的目标：

✓ GREAT BENEFIT OF THE PRODUCT             ✓ BENEFIT OF THE PRODUCT
  Explanation of the benefit.                 Explanation of the benefit
                                              that is quite long, long, 
                                              long, long, long, long, long,
                                              long, long, long, long.         

✓ ANOTHER AMAZING BENEFIT OF THE PRODUCT   ✓ AMAZING BENEFIT OF THE PRODUCT
  Explanation of the benefit.                 Explanation of the benefit

（这是用于常规尺寸的显示器，在较小的显示器上，它们应该只是在彼此下方的一列中。）

我想html部分可能是这样的：

<html>
   <body>
      <div class="item">
         <div class="benefit-title">Great benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Another amazing benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit that is quite long, long, long, long.</div>
      </div>
      <div class="item">
         <div class="benefit-title">Amazing benefit of the product</div>
         <div class="benefit-expl">Explanation of the benefit.</div>
      </div>
   </body>
</html>

但是 css 怎么样。我尝试了使用自定义检查标记的列表，但无论解释有多长，我都不确定如何垂直对齐大写的行。

我也在玩 CSS 网格，但我无法正确放置复选标记。我想我需要一个网格中的网格，据我所知尚不支持。

是否有一些优雅的解决方案不涉及将布局定义放入 html 中（例如使用表格）。避免绝对定位会很好，但不是必需的。

【问题讨论】：

没有边框的表格怎么样？
"我也在玩 CSS 网格，但我无法正确放置复选标记。" — 4 列网格。在奇数列中打勾，在事件编号中打勾
伪元素和定位有什么问题。似乎完全自然的方式去做。那么你所需要的就是左填充。
@Iñigo 这将涉及在 html 文件中硬连线布局，而不是指定内容的 html 文件和 css （响应式）布局。
有点想知道为什么这会被否决 3 次。

标签： html css html-lists css-grid

【解决方案1】：

你只需要定位一个伪元素

.wrap {
  display: grid;
  margin: 1em auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.item {
  border: 1px solid grey;
  padding-left: 2em;
}

.benefit-title {
  position: relative;
}

.benefit-title::before {
  content: "X";
  position: absolute;
  left: -1.5em;
}

<div class="wrap">
  <html>

  <body>
    <div class="item">
      <div class="benefit-title">Great benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Another amazing benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit that is quite long, long, long, long.</div>
    </div>
    <div class="item">
      <div class="benefit-title">Amazing benefit of the product</div>
      <div class="benefit-expl">Explanation of the benefit.</div>
    </div>
  </body>

  </html>
</div>

【讨论】：

完美。这很好用。（我使用rem 而不是em 使其更健壮）谢谢