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>

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