文章目录

  • 前言
  • 一、负边距
  • 一、nth-child()系列)

前言

如何从最后一列的每个元素中删除边距?
在元素宽度不确定的情况下,或者如果屏幕很小或用户调整浏览器大小,则每行排列的个数就不确定
因此,在任何情况下,最后一列中出现的任何元素(可以是一个或多个然后是一个)。我想删除margin-right。

除非您确切知道每行有多少个元素(通过选择器的nth-child()系列),否则无法使用纯CSS在每行的特定元素上删除或添加样式。

<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>

一、负边距

通过在父元素上添加负边距来伪装它们。这会给人一种幻想,即您的子元素适合放在父元素内,而各个元素之间仍然有间距

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(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;}
}

css-如何对每行中最后一个元素删除边距?相关推荐

  1. [jstips]向数组中插入一个元素

    向现有数组中插入一个元素是经常会见到的一个需求.你可以: 使用push将元素插入到数组的尾部: 使用unshift将元素插入到数组的头部: 使用splice将元素插入到数组的中间: 上面那些方法都是常 ...

  2. 遍历strs数组,并判断数组中每一个元素的长度, * 将长度为偶数的元素和长度为奇数的元素分别存放在两个集合中,

    package Day08;import java.util.ArrayList;/*** 二* 字符串数组strs中包含字符串{"12","345",&quo ...

  3. java在原数组中追加一个元素

    java在原数组中追加一个元素 /* * 在原数组中追加一个元素 * */ public class Test05 {public static void main(String[] args) {/ ...

  4. java——定义一个功能将ArrayList 集合中的重复元素删除(java集合七)

    定义一个功能将ArrayList 集合中的重复元素删除 ArrayList 集合中是允许储存重复元素的 import java.util.ArrayList; import java.util.Ite ...

  5. java list最后一个元素_Java实现寻找列表List中最后一个元素

    Java实现寻找列表List中最后一个元素 如何在一个元素列表List中找到最后一个元素? import java.util.LinkedList; import java.util.List; im ...

  6. 数据结构例16.试设计一个算法, 使得在一个有序的单链表中插入一个元素后仍然有序。

    /* 16.试设计一个算法, 使得在一个有序的单链表中插入一个元素后仍然有序. */ # include <iostream> # include <stdlib.h> # i ...

  7. C++ 单链表基本操作分析与实现 链表   链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点(链表中每一个元素称为结点)组成,结

    C++ 单链表基本操作分析与实现 链表 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以 ...

  8. 任意长度的python列表最后一个元素索引_任意长度的 Python 列表、元组和字符串中最后一个元素的下标为 ________ 。_学小易找答案...

    [填空题]已知 x = [3, 5, 7] ,那么表达式 x[10:] 的值为 ____________ . [填空题]表达式 [x for x in [1,2,3,4,5] if x<3] 的 ...

  9. R语言如何向向量中追加一个元素?

    R语言如何向向量中追加一个元素? 目录 R语言如何向向量中追加一个元素? R语言是解决什么问题的? R语言如何向向量中追加一个元素? R语言是解决什么问题的? R 是一个有着统计分析功能及强大作图功能 ...

最新文章

  1. history linux 日志服务器_Linux日志分析
  2. xml文件上传服务器读取不了,本地读取服务器Xml文件及本地读本地的xml
  3. 数据库事务的隔离级别简单总结
  4. 计算机网络实验三:网络层和链路层网络协议分析
  5. android 崩溃捕获框架,DefenseCrash
  6. (转)详解HTML网页源码的charset格式
  7. android studio执行 Information:Gradle tasks [:app:assembleDebug]失败处理
  8. 深职院c语言考试试卷,深职院第1章C语言基础与入门教学.ppt
  9. u盘如何安装2003服务器系统安装,u盘怎么安装win server2003系统是iso
  10. vue 前端使用 element-ui 实现省市级联动
  11. 《大型网站技术架构》阅读笔记
  12. 【算法专题】链表排序算法总结
  13. 线性代数之 矩阵的迹
  14. 计算机删除的文件怎么查找,如何找回电脑中删了的文件
  15. mysql 求订单总金额,MySQL查询 每年 每月 每日 订单数和订单金额
  16. 【问题解决】电脑连接自家WiFi不能进B站而手机能进
  17. win2003控制面板不见了,打开“控制面板”的方法,安全策略
  18. java自旋锁使用_10.Java锁之自旋锁
  19. 微软的一道前端面试题
  20. 找不到 Microsoft Excel Driver ODBC 驱动程序的安装例程 解决方案

热门文章

  1. SaltStack源码分析之:master端执行salt模块大致流程
  2. 2015 CALLED THE INTERFACE OF 2014
  3. Jackson、JSON-lib、Gson性能对比
  4. 按任意的字段旋转的存储过程
  5. spoolsv.exe占cpu 99%的解决方法(转)
  6. 789. 逃脱阻碍者
  7. 为什么Java里面没有 SortedList
  8. 如何使用Picterra的地理空间平台分析卫星图像
  9. 时间序列分析 lstm_LSTM —时间序列分析
  10. Aho-Corasick automaton 模板