中间文字，两侧线条，文字居中的布局

一

 <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>