HTML负margin两列列表布局_html/css

来源：懂视网责编：小采时间：2020-11-27 16:33:34

HTML负margin两列列表布局_html/css

HTML负margin两列列表布局_html/css_WEB-ITnose: 预约主页账单消息评价 /*首页网格*/.nav-grid {margin:0px;padding:0px;width:100%;list-style: none;display: inline;font-size: 0px;}.nav-grid li {width:45%;padding-bottom:35%;font-size: 1

推荐度：

点击下载本文 文档为doc格式

导读HTML负margin两列列表布局_html/css_WEB-ITnose: 预约主页账单消息评价 /*首页网格*/.nav-grid {margin:0px;padding:0px;width:100%;list-style: none;display: inline;font-size: 0px;}.nav-grid li {width:45%;padding-bottom:35%;font-size: 1

	预约
	主页
	账单
	消息
	评价

/*首页网格*/.nav-grid {margin:0px;padding:0px;width:100%;list-style: none;display: inline;font-size: 0px;}.nav-grid li {width:45%;padding-bottom:35%;font-size: 15px;position: relative;margin:4% 2% 4% 3%;background-color: #fff;}.nav-grid li a{position: absolute;display: inline-block;height: 100%;width: 100%;text-align: center;vertical-align: middle;}.nav-grid li.col2-top{margin-top:-117% !important; margin-left:52% !important;}.nav-grid li.col2{margin-left:52%;}

效果

整个过程是这样的：

margin-top:-117%;以后，消息和评价位置会上提，覆盖了前面三个，然后增加margin-left 使得水平距离增加，达到两列的效果。

参考http://blog.aizhet.com/web/5156.html