演示效果：点我
效果一：
<style type="text/css" media="screen"> #login_frame .with-line { width:300px;font-size: 16px; color: #999; margin: 0 auto; position: relative; text-align: center } #login_frame .with-line:before { content: ""; border-top: 1px solid #ededed; display: block; position: absolute; width: 60px; top: 10px; left: 0 } #login_frame .with-line:after { content: ""; border-top: 1px solid #ededed; display: block; position: absolute; width: 60px; top: 10px; right: 0 } </style> <div id="login_frame"> <div class="with-line">这里是中间的文字部分</div> </div>效果二：
<style type="text/css"> ul{ margin:0; padding:0; list-style-type:none;} #nav{font-size:12px;padding-bottom:15px;} #nav li{width:100%; height:30px;} #nav .item1{width:100%; border-bottom:1px solid #6c6;margin-bottom:-15px;} #nav li a{width:100%; display:block;color:#666;text-decoration:none;padding:6px 5px;text-align:center;} #nav li span{background:#FBFBFB; border:1px solid #eeeeee;padding:6px 5px;} </style> <ul id="nav"> <li class="item1"></li> <li class=""><a href=""><span>标题1</span></a></li> </ul>