一
<style>
.free_fit{
position: relative;
height: 30px;
}
.tit{
180px;
height: 30px;
text-align: center;
color: #616161;
font-weight: 700;
background:white;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -90px;
line-height: 30px;
}
.tit-bg{
100%;
height: 1px;
position: absolute;
z-index: 1;
top: 14px;
background: #ccc;
}
.zhanwei{
100%;
height: 20px;
background: yellow;
text-align: center;
}
</style>
<div style=" 100%;height: 50px;background: red">
<div class="free_fit">
<p class="tit">中间的文字</p>
<p class="tit-bg"></p>
</div>
</div>
<div class="zhanwei">
占位div，直观的验证
</div>
二
<style type="text/css">
ul#navlist {
font:12px verdana;
padding-bottom: 13px;
}
ul#navlist li span{
background: #FBFBFB;
}
ul#navlist li {
float: left;
height: 30px;
border: 0px solid #6c6;
100%;
}
ul#navlist .list1 {
border-bottom: 1px solid #6c6;
100%;
margin-bottom: -15px;
}
#navlist b {
display: block;
color: #666;
text-decoration: none;
padding: 6px 5px;
100%;
text-align: center;
}
</style>
</head>
<body>
<ul id="navlist">
<li class="list1"></li>
<li class="list2"><b><span>官方精选</span></b></li>
</ul>
</body>
</html>