效果图：
手机版网站顶部导航条布局分为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>
时间： 2024-11-05 02:40:52