标题栏模块溢出css效果

最终需要实现的效果如上图

此处主要讨论商品介绍模块溢出压住标题栏的问题

标题栏使用ul实现 li左浮动 里面的字为a标签包裹的链接

有两种方法实现溢出，实现的方法相同只是最终的实现效果略有不同

①a float后调整边框撑起整个li 点击整块白色部分都可链接，通过调整a溢出

②只有字可以链接，直接调整li溢出

正如上文所说实现溢出的方法一样只是操作的对象不同，这里以li溢出为例

[code=plain]<ul class="buy_consult">
<li class="all_buy"><a href="">全部购买咨询</a></li>
<li><a href="#">商品咨询</a></li>
<li><a href="#">库存配送</a></li>
<li><a href="#">支付</a></li>
<li><a href="#">保修</a></li>
<li><a href="#">支付帮助</a></li>
<li><a href="#">配送帮助</a></li>
<li><a href="#">常见问题</a></li>
</ul>

[code=plain].buy_consult{
border-top: 2px solid #999999;
background-color: #f7f7f7;
height: 28px;

/*注意此处一定不要写line-height:28px*/

/*不可写overflow:hidden;否则会无法溢出*/
}
.buy_consult>li{
float: left;
padding: 0px 12px;
font-size: 12px;
height: 28px;
line-height: 28px;
}
.buy_consult>li.all_buy{  /*第一个白色溢出模块*/
height: 32px;
line-height: 32px;/*里面的块的高度大于外面的块，并且设置line-height就可实现溢出*/
background-color: #fff;
border-top:2px solid #e3393c;
margin-top:-5px;
}
.buy_consult li a{
font-size: 14px;
}

注意：在li等块中一些内含块的高度不用不能通过统一设置line-height实现垂直居中，可分别设置line-heigh值

**************************line-height值的设置可以实现很多内含元素的居中对齐************

内含元素要去覆盖外面元素的line-height值一定要注意选择器的优先级，如果优先级不够则无法完成覆盖