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

css实现实现竖向堆叠问题

如何利用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>
页: [1]
查看完整版本: css实现实现竖向堆叠问题