本文介绍了如何从作为行中最后一个元素的每个元素中删除边距？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 如何从最后一列的每个< li> 删除边距？我要求每当我有9 < li> 时出现在最后一列的< li> 3。我不是要求从的最后一个< li> 的最后一个项目中删除 margin c>< ul> 我已经知道：last-child {margin-right：0} 如果屏幕较小或用户调整浏览器大小， 3 + 3 + 3 可以变为 4 + 5 或 2 + 2 + 2 + 2 + 1 因此，在任何条件下，任何< li> 一个或多个，然后一个）在最后一列。我要移除 margin-right 。 所有li都在一个ul < ul> < li> item 1< / li> < li> item 2< / li> < li> item 3< / li> < li> item 4< / li> < li> item 5< / li> < li> item 6< / li> < li> item 7< / li> < li> item 8< / li> < li> item 9< / li> < / ul> 我在这里添加了jsfiddle： http://jsfiddle.net/GnUjA/1/ 解决方案删除或者在每行的特定元素上添加样式不能使用纯CSS，除非你知道每行有多少个元素（通过 nth-child（） 可以在这种情况下进行操作。 $ h $> $ h的边距是通过在父元素上添加负边距来伪装它们。这将给你的幻觉，你的孩子元素适合在父元素内，同时仍然在单个元素之间的间距： http://codepen.io/cimmanon/pen/dwbHi ul { margin-left：-5px; margin-right：-5px; } li { margin-left：5px; margin-right：5px; } 将边距分成两半，并将其设置为两边（ margin-left：5px; margin-right：5px ）可能比单一边距（ margin-right：10px ），特别是如果您的设计需要使用LRT 和 RTL方向。 注意：这可能需要添加在父元素上的overflow-x：hidden ，以防止水平滚动，具体取决于容器元素到视口边缘的靠近程度。 媒体查询 如果您可以合理预测每行会有多少项目，您可以使用媒体查询来定位行中的最后一个项目， code> nth-child（）。这比使用负边距显然更冗长，但它允许你进行其他样式调整： @media（min- width：400px）和（max-width：499px）{ li：nth-child（even）{ margin-right：0; border-right：none; } } @media（min-width：500px）and（max-width：599px）{ li：nth-child（3n + 3） { margin-right：0; border-right：none; } } @media（min-width：600px）and（max-width：799px）{ li：nth-child（4n + 4） { margin-right：0; border-right：none; } } / *等* / How to remove margin from every <li> of last column? I'm asking for every <li> which comes in last column when I have 9 <li> and 3 in each column. I'm not asking just to remove margin from last item of last <li> of a <ul> which I already know :last-child { margin-right: 0 }And if screen is small or user resize the browser then 3 + 3 + 3 can become to 4 + 5 or 2 + 2 + 2 + 2 + 1So in any condition any <li> ( it can be one or more then one) which comes in last column. I want to remove margin-right.All li are within a single ul<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li></ul>I added jsfiddle here: http://jsfiddle.net/GnUjA/1/ 解决方案 Removing or adding stylings on a specific element of each row cannot be done with pure CSS unless you know exactly how many elements there are per row (via the nth-child() family of selectors).Negative MarginsWhat you can to do in the case of margins is disguise them by adding negative margins on the parent element. This will give the illusion that your child elements fit inside the parent element while still having spacing between the individual elements:http://codepen.io/cimmanon/pen/dwbHiul { margin-left: -5px; margin-right: -5px;}li { margin-left: 5px; margin-right: 5px;}Splitting the margin in half and setting it on both sides (margin-left: 5px; margin-right: 5px) may give better results than a single margin on one side (margin-right: 10px), particularly if your design needs to work with LRT and RTL directions.Note: this may require adding overflow-x: hidden on an ancestor element to prevent horizontal scrolling, depending on how close the container element is positioned to the edge of the viewport.Media QueriesIf you can reasonably predict how many items there are going to be per row, you can use media queries to target the last item in the row via nth-child(). This is considerably more verbose than using negative margins, but it would allow you to make other style adjustments:@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(3n+3) { margin-right: 0; border-right: none; }}@media (min-width: 600px) and (max-width: 799px) { li:nth-child(4n+4) { margin-right: 0; border-right: none; }}/* etc. */ 这篇关于如何从作为行中最后一个元素的每个元素中删除边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
