诗岑
2022-06-24 22:00
采纳率: 100%
浏览 15
已结题

HTML、css布局问题

问题遇到的现象和发生背景

希望能把“动态”“关注”“粉丝“弄成等高并排。

问题相关代码,请勿粘贴截图
*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100%;
    /* 弹性布局 居中 */
    display: flex;
    background-color: #e2c8db;
}
ul{
    list-style: none;
}
nav{
    /* 固定定位 */
    position: fixed;
    width: 300px;
    height: 650px;
    background-color: #c584b3;
}
.menus{
    margin: 50px 0;
    color: #fff;
}
.li{
    letter-spacing: 2px;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 0;
    /* 动画过渡 */
    transition: 0.3s;
}
.menus li:hover{
    background-color: #d2a6c6;
}
.li .fa{
    font-size: 20px;
    width: 50px;
    height: 20px;
    text-align: center;
    margin-left: 5px;
}
.li ul{
    width: 0;
    height: 550px;
    padding: 50px 0;
    background-color: #a06993;
    position: absolute;
    top: 0;
    right: 0;
    float: left;
    overflow: hidden;
    transition: 0.3s;
}
.li ul li{
    padding: 16px 24px;
    /* 文字禁止换行 */
    white-space: nowrap;
    transition: 0.3s;
}
.li:hover ul{
    width: 250px;
}
.li ul li:hover{
    background-color: #c28fb4;
}
.admin{
    margin-left:300px;
    border-style:none;
}
.portrait{
    margin-left:300px;
    margin-top:5px;
    border-style:none;
}
.user{
    font-size:36px;
    margin-left:310px;
    margin-top:5px;
    border-style:none;
}
.trend{
    font-size:12px;
    border-style:none;
    margin-left:305px;
    margin-top:15px;
}
.follow{
    font-size:12px;
    border-style:none;
    margin-left:315px;
    margin-top:15px;
}
.fans{
    font-size:12px;
    border-left-style:none;
    margin-left:325px;
    margin-top:15px;
}
.termimal{
    border-style:none;
    margin-left:400px;
    margin-top:20px;
}
.interst{
    border-style:none;
    margin-left:300px;
    margin-top:480px;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>工作台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="admin.css">
</head>
<body>
    <nav>
        <ul class="menus">
            <li class="li">
                <i aria-hidden="true"></i>
                导航
            </li>
            <li class="li">
                <i aria-hidden="true"></i>
               登录
                <ul>
                    <li>登录</li>
                    <li>注册</li>
                    <li>修改密码</li>
                </ul>
            </li>
            <li class="li">
                <i aria-hidden="true"></i>
                工作台
            </li>
            <li class="li">
                <i aria-hidden="true"></i>
                用户分析
                <ul>
                    <li>基本属性分析</li>
                    <li>偏好分析</li>
                    <li>消费分析</li>
                    <li>时间分析</li>
                </ul>
            </li>
            <li class="li">
                <i aria-hidden="true"></i>
                视频数据
            </li>
            <li class="li">
                <i aria-hidden="true"></i>
                个性化推荐
                <ul>
                    <li>年度报告</li>
                </ul>
            </li>
        </ul>
    </nav>
        <div class="admin">
           <div id="portrait>
               <img src="../../img/portrait.png">    
         </div>
        <div id="user">
            <p>admin</p>
            <label bgcolor="red">Lv6</label>
        </div>
            <div id="trend">
                <p>44</font></p>
                <p>动态</p>
            </div>
        <div id="follow">
            <p>150</p>
            <p>关注</p>
        </div>
        <div id="fans">
            <p>14</p>
            <p>粉丝</p>
        </div>
        <div id=terminal>
            <img src="../../img/terminal.png">
        </div>
        <div id=interest>
            <img src="../../img/interest.png">
         </div>
    </div>
</body>

</html>

运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

1条回答 默认 最新

相关推荐 更多相似问题