> 웹 프론트엔드 > HTML 튜토리얼 > HTML 负margin 两列列表布局_html/css_WEB-ITnose

HTML 负margin 两列列表布局_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 09:18:21
원래의
1260명이 탐색했습니다.

<ul class="nav-grid">	<li><a class="border-full" href="${pageContext.request.contextPath}/newapp/stylistService/serviceOrders">预约</a></li>	<li><a class="border-full">主页</a></li>	<li><a class="border-full">账单</a></li>	<li class="col2-top"><a class="border-full">消息</a></li>	<li class="col2"><a class="border-full">评价</a></li></ul>
로그인 후 복사
/*首页网格*/.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 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿