标签：ado bsp lin margin dcl nav html line uga
效果图：
手机版网站顶部导航条布局分为3块：
1、左侧返回上一页按钮（固定宽高）
2、右侧菜单按钮（固定宽高）
3、中间文字介绍（宽度自适应且文字居中）
要实现这个效果最简单的办法是2边绝对定位，中间text-align-center
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;} div, p, ul, ol, dl, dt, dd, form{margin:0;padding:0;} *{box-sizing:border-box;} .container-fluid{width:100%;min-height:50px;background:#080808;padding:0 10px;position:relative;} .navbar-brand{font-size:18px;height:50px;line-height:20px;padding:15px;position:absolute;left:0;top:0;z-index:1;} .navbar-text{line-height:50px;color:#ffffff;} .text-center{text-align:center;} .navbar-toggle{background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px;margin-bottom:8px;margin-right:15px;margin-top:8px;padding:9px 10px;position:absolute;right:0;top:0;z-index:1;} </style> </head> <body> <div class="container-fluid"> <a class="navbar-brand" href="javascript:history.go(-1);"> <span class="glyphicon glyphicon-menu-left"></span> </a> <p class="navbar-text text-center">商品详情</p> <button class="navbar-toggle" data-target=".top-menu" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </body> </html>
标签：ado bsp lin margin dcl nav html line uga
原文地址：http://www.cnblogs.com/gongshunkai/p/6130759.html
