css实现实现竖向堆叠问题

black_1998 · 发表于 2020-11-27 20:06:52

您需要登录才可以下载或查看，没有账号？立即注册

x

如何利用div+cs实现竖向的标题堆叠

yuesezhenmei · 发表于 2020-11-28 18:46:03

1：巧方法，用display：flex；flex-direction: column;justify-content: space-between;
2：傻方法，relation和absolute一个一个弄
听得懂就自己写，听不懂在说，我写全部

狗宁 · 发表于 2020-11-29 17:12:27

楼上正解，建议好好学弹性布局

fc40102599 · 发表于 2020-11-30 08:33:15

基本写法就是用ul写，把列表的默认样式清除list-style:none。
右箭头我用的使iconfont。
简单写写如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nav</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2196223_xqnxvcihpai.css">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
background-color: #14024b;
color: #75b9d5;
padding: 0 20px;
width: 200px;
}
.nav li{
font: 16px/40px "黑体";
}
.nav li i{
float: right;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
<li>前端开发<i class="iconfont icon-icon11-copy"></i></li>
</ul>
</div>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册