html的li浮动之后往下移动,多个li浮动后居中显示问题-程序员宅基地

技术标签: html的li浮动之后往下移动  

wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

在实际工作当中经常会遇到像上面这样的布局,就是不确定li的个数,但是想让它在父元素内水平居中显示或是相对父元素两端对齐。

先看基础的

/p>

这样只能靠左显示。

解决方法目前搜集了三种:

第一种:利用css3选择器:nth-child(n)设定最后一列li的margin-right值为0。

这也是我第一反应想到的方法,添加

/p>

第二种:设置ul的margin-left为负值。

这是从猫爷的博客看到的,感觉很酷,也很简单

html 代码

HTML5

//老IE支持 html5 新标签

//老IE支持响应式标签

*{margin:0;padding: 0;}

.main{width:1180px;height:auto;margin:100px auto;border:1px solid #f00;}

.main ul{list-style: none;overflow: hidden;margin:0 auto;margin-left: -20px;}

.main ul li{width:280px;height:200px;margin-left:20px;margin-top:20px;background: #f00;float:left;}

原理:让ul整体向左移动一个li的margin-left值,第一个li不是多出来一个margin-left吗?让它移到与.mian对齐就好了

第三种:设置ul的宽度大于.mian的宽度,即为li总体宽度(li+margin值)

这是极客学院上提出的一种方法,也可以解决

html 代码

HTML5

//老IE支持 html5 新标签

//老IE支持响应式标签

*{margin:0;padding: 0;}

.main{width:1180px;height:auto;margin:100px auto;border:1px solid #f00;}

.main ul{width:1200px;list-style: none;overflow: hidden;margin:0 auto;}

.main ul li{width:280px;height:200px;margin-right:20px;margin-top:20px;background: #f00;float:left;}

总结:以上方法都可以解决,但是如果考虑到css3兼容性的话,建议用后两种。如果有更多方法,欢迎吐槽!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_28788777/article/details/117880022

智能推荐

2018.12.04 verification models and identification models_learning deep features from body and parts for per-程序员宅基地

文章浏览阅读200次。参考文章内容:Learning deep features from body and parts for person re-identification in camera networksverification models and identification models:The verification models [10–12] takepairs of images a..._learning deep features from body and parts for person re-identification in c

Android i2cdetect i2cdump i2cget i2cset调试工具使用_i2cget命令详解-程序员宅基地

文章浏览阅读5.5k次,点赞6次,收藏36次。本文介绍Android/Linux (反正是ARM) 的I2C调试工具用法 , 包括i2cdetect、i2cdump、i2cget和i2cset,可实现I2C设备的识别、监控和配置。i2cdetect用于扫描所有设备地址,i2cdump读取寄存器的值,而i2cget和i2cset分别实现读取和写入寄存器的功能。这些工具提供了便捷的方式与I2C设备进行交互,深入了解设备状态与配置。_i2cget命令详解

你以为的计算机网络技术,tgwgua计算机网络技术对人类社会发展的影响-程序员宅基地

文章浏览阅读89次。tgwgua计算机网络技术对人类社会发展的影响-+懒惰是很奇怪的东西,它使你以为那是安逸,是休息,是福气;但实际上它所给你的是无聊,是倦怠,是消沉;它剥夺你对前途的希望,割断你和别人之间的友情,使你心胸日渐狭窄,对人生也越来越怀疑。—罗兰计算机网络技术对人类社会发展的影响摘要:20世纪大众媒体在世界范围内经历了网络化的历程,信息化,数字化和网络化的高度一体化的信息交流方式使人们明显感觉到这种新的方..._计算机说tgw

火出圈的ChatGPT,在地学、地球科学领域的强大应用_chatgpt在地学-程序员宅基地

文章浏览阅读1.1k次,点赞37次,收藏23次。以ChatGPT、LLaMA、Gemini、DALL·E、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮,可以。4) 国内外经典大模型(ChatGPT、LLaMA、Gemini、DALL·E、Midjourney、Stable Diffusion、星火大模型、文心一言、千问等)2) 数据清洗方法(重复值、缺失值处理、异常值检验、标准化、归一化、数据长宽转换,数据分组聚合)4) 深度学习算法(神经网络、激活函数、交叉熵、优化器)_chatgpt在地学

信息熵,交叉熵与相对熵_信息熵 交叉熵相对熵-程序员宅基地

文章浏览阅读309次。前言最近在多处看到熵的概念,之前零散的了解了一下,最近总结下,加深一下理解。熵熵是信息论中的一个概念,用于衡量一个随机变量的不确定性,公式很简单:log(1/p(x))log(1/p(x))log(1/p(x)),其中p(x)p(x)p(x)为x的概率分布(离散)或者概率密度(连续)函数,公式很直观,概率越小熵越大,即信息量越大。信息熵信息熵为熵的期望,用于衡量一个分布的不确定性,以下为..._信息熵 交叉熵相对熵

springboot面向高校的知识共享与交流平台--74022 (免费领源码、附论文)可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、全套文_知识共享免费-程序员宅基地

文章浏览阅读182次。本次报告,首先分析了研究的背景、作用、意义,为研究工作的合理性打下了基础。针对面向高校的知识共享与交流平台的各项需求以及技术问题进行分析,证明了系统的必要性和技术可行性,然后对设计系统需要使用的技术软件以及设计思想做了基本的介绍,最后来实现知识共享与交流平台的部署运行使用它。本文展示了首页页面的实现效果图,并通过代码和页面介绍了资源共享、资源类型、分享信息、知识问答、留言反馈等功能的实现过程。_知识共享免费

随便推点

海康威视iVMS系统在野 0day漏洞复现_/eps/api/resourceoperations/upload-程序员宅基地

文章浏览阅读1.9k次,点赞5次,收藏2次。简介:海康威视iVMS系统存在在野 0day 漏洞,攻击者通过获取密钥任意构造token,请求/resourceOperations/upload接口任意上传文件,导致获取服务器webshell权限,同时可远程进行恶意代码执行。_/eps/api/resourceoperations/upload

Beam Search 及5种优化方法-程序员宅基地

文章浏览阅读4.7k次,点赞7次,收藏28次。文章目录Beam Search 及优化1. Review Beam Search2. Beam Search Refinement2.1 Hypothesis filtering2.2 Normalization2.2.1 Length Normalization2.2.2 Coverage Normalization2.2.3 End of sentence Normalization2.3 Decoding with auxiliary language model2.4 Decoding with _beam search

Windows11 解除TPM限制破解安装方法汇总_win11 解除tpm-程序员宅基地

文章浏览阅读1w次。从应用的维度,来学习一下蓝牙_win11 解除tpm

新建groovy-maven工程(一)_new groovy project-程序员宅基地

文章浏览阅读1k次。@新建groovy-maven工程(一)#一、写在前面ngrinder脚本页面,可以支持简单的post或get请求,填入url、参数等信息即可完成脚本创建,但是后续脚本的增强(如参数化等)需要自己手写代码完成,其他请求脚本(如java请求)也需要自己手写代码,由于在ngrinder脚本页面,没有语法校验,也无法自动下载依赖jar包,十分不方便。幸好ngrinder在脚本页面,提供了可新建gro..._new groovy project

戴尔服务器修改分辨率,dell显示器怎么设置分辨率-程序员宅基地

文章浏览阅读4.2k次。显示器的概念还没有统一的说法,但对其认识却大都相同,顾名思义它应该是将一定的电子文件通过特定的传输设备显示到屏幕上再反射到人眼的一种显示工具。下面是学习啦小编带来的关于dell显示器怎么设置分辨率的内容,欢迎阅读!dell显示器怎么设置分辨率?CRT显示器最佳分辨率的设置方法:针对CRT显示器,通过将其设置为最高分辨率将是最明智的选择。同时当发现屏幕出现晃动的现象时,通过可以将“刷新率”设置高一些..._服务器分辨率怎么提高

1.2Java内存模型——原子性、内存可见性、重排序、顺序一致性、volatile、锁、final-程序员宅基地

文章浏览阅读3.6k次,点赞4次,收藏13次。一、原子性原子性操作指相应的操作是单一不可分割的操作。例如,对int变量count执行count++d操作就不是原子性操作。因为count++实际上可以分解为3个操作:(1)读取变量count的当前值;(2)拿count的当前值和1做加法运算;(3)将加完后的值赋给count变量。在多线程环境中,非原子操作可能会受其他线程的干扰。比如,上述例子如果没有对相应的代码进行同步(Synchronizat...