如何解决我试图用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%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。