安徽创誉建设工程有限公司网站,简单的网站设计,网站 竞争分析,园林景观设计平面图文章目录前言一、负边距一、nth-child()系列)前言
如何从最后一列的每个元素中删除边距#xff1f; 在元素宽度不确定的情况下#xff0c;或者如果屏幕很小或用户调整浏览器大小#xff0c;则每行排列的个数就不确定 因此#xff0c;在任何情况下#xff0c;最后一列中出…
文章目录前言一、负边距一、nth-child()系列)前言
如何从最后一列的每个元素中删除边距 在元素宽度不确定的情况下或者如果屏幕很小或用户调整浏览器大小则每行排列的个数就不确定 因此在任何情况下最后一列中出现的任何元素(可以是一个或多个然后是一个)。我想删除margin-right。
除非您确切知道每行有多少个元素(通过选择器的nth-child()系列)否则无法使用纯CSS在每行的特定元素上删除或添加样式。
ulliitem 1/liliitem 2/liliitem 3/liliitem 4/liliitem 5/liliitem 6/liliitem 7/liliitem 8/liliitem 9/li
/ul一、负边距
通过在父元素上添加负边距来伪装它们。这会给人一种幻想即您的子元素适合放在父元素内而各个元素之间仍然有间距
ul {margin-left: -5px;margin-right: -5px;
}li {margin-left: 5px;margin-right: 5px;
}
li:last-child{margin-right: 5px;
}注意:这可能需要在祖先元素上添加overflow-x: hidden来防止水平滚动具体取决于容器元素与视口边缘的接近程度。
一、nth-child()系列)
如果可以合理地预测每行有多少个项目则可以使用媒体查询通过nth-child()定位该行中的最后一个项目。这比使用负边距要冗长得多但它可以让您进行其他样式调整
media (min-width: 400px) and (max-width: 499px) {li:nth-child(even) {margin-right: 0;border-right: none;}
}media (min-width: 500px) and (max-width: 599px) {li:nth-child(3n3) {margin-right: 0;border-right: none;}
}media (min-width: 600px) and (max-width: 799px) {li:nth-child(4n4) {margin-right: 0;border-right: none;}
}
