<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
*{margin: 0; padding: 0;}
html,body{
height: 100%;
}
html{
font-size: 31.25vw;
}
body{
display: flex;
flex-direction: column;
font-size: 16px;
}
header{
height: 0.44rem;
background: #F08080;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav{
/* flex-grow: 1; */
background: #ff0;
display: flex;
overflow: auto;
height: 0.44rem;
line-height: 0.44rem;
}
header nav a{
display: block;
width: 0.4rem;
flex-shrink: 0;
}
header span{
padding: 0 0.05rem;
background: rgba(255,0,0,.5);
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
height: 0.44rem;
line-height: 0.44rem;
}
</style>
</head>
<body>
<header>
<nav>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</nav>
<span>+</span>
</header>
</body>
</html>
左右滚动
最新推荐文章于 2021-12-22 09:40:57 发布