我试图用CSS Flexbox创建一个3列网格，但并非所有网格都对齐我究竟做错了什么？

问题描述

以下是页面链接：https://codepen.io/emma-billerbeck/pen/JjXjwQO

我确定这可能与页边距或填充有关，但我似乎无法调试问题。我希望白框/区域与其他定价框对齐，但是它向右移动了5-6像素。这是我苦苦挣扎的代码片段：

192.168.0.1 example1.domain.com
192.168.0.2 example2.domain.com
192.168.0.3 example3.domain.com

解决方法

如果您使用以下内容更新CSS，似乎您正在浮动<ol>列表中的li项目，这应该可以解决您的问题。

从<ol>删除填充，并正确对齐列表项。

.product > ol {
  padding: 0;
}

.product > ol > li {
  padding: 2px 0;
  color: black;
  float: none;
  display: inline-block;
}

,

您在li元素上有一个set，这意味着在某些屏幕尺寸上该对齐方式无效。设置这些属性以修复对齐方式。

.product > ol {
    margin: 5px 0;
    padding: 0;
    width: 90%;
}

li {
    width: 100%;
}