html的li浮动之后往下移动,多个li浮动后居中显示问题

在实际工作当中经常会遇到像上面这样的布局，就是不确定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兼容性的话，建议用后两种。如果有更多方法，欢迎吐槽！

html的li浮动之后往下移动,多个li浮动后居中显示问题相关推荐

Div在设置了浮动的情况下水平居中
自己布局的时候发现在设置了div为浮动后再去添加margin:auto属性是无效的: 测试一首先简单布局一下,在body里面添加两个div,一个父div(div_box),一个子div (div1) ...
用ul和li来制作菜单下拉框
鼠标触碰该区域因为我为了网页的更好布局我首先用一个div将ul括起来,ul里有li,li里嵌套一个ul,若是想制作多级菜单,便可再第二个ul的li里再嵌套一个ul便可制作出多级菜单. 部分代码实现如 ...
CSS 如何让li横向居中显示
先给一个简单的示例HTML代码 [html] view plaincopy <body> <form id="form1" runat="server& ...
什么是浮动塌陷css,css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
html怎么使用伪类清除浮动,JS中使用 after 伪类清除浮动实例
以前清除浮动的时候总是在想要清除浮动的元素后面添加或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content: ...
[HTML]去除li前面的小黑点,和ul、LI部分属性
[转] 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除. [HTML]去除li前面的小黑点,和ul.LI部 ...
Linux下vi修改行距,调整label中text显示的行间距
iOS UILabel UITextView UIButton 等等显示文本行间距 iOS UILabel UITextView UIButton 等等显示文本行间距都用如下方法 NSMutable ...
html清除浮动有几种方法,HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如实例:清除容器中子元素的浮动,让父元素塌陷的高度恢复. CSS代码: .content{ wid ...

html的li浮动之后往下移动,多个li浮动后居中显示问题

html的li浮动之后往下移动,多个li浮动后居中显示问题相关推荐

最新文章

热门文章