HTML ネガティブマージン 2 列リストlayout_html/css_WEB-ITnose

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

効果

全体のプロセスは次のとおりです:

マージントップ:-117% その後、メッセージと評価の位置が上がり、最初の 3 つがカバーされ、その後マージン左が上昇します。水平距離を長くするには、2 つの列の効果を実現します。

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