希望能把“动态”“关注”“粉丝“弄成等高并排。
*{
/* 初始化 */
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、以你现在的布局，只能把它们变成行内元素，就是display:inline-block
2、建议把这三个再用一个div包住，然后用flex布局