效果圖：
手機版網站頂部導航條布局分為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>