麻烦老师指导一下利用浮动或者position定位和弹性盒子两种方法怎么样实现效果图
图1
图2
图1为弹性盒子设置，代码如下，与实际效果图有差异，麻烦老师看下如何修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="../css/workstyle.css">
</head>
<body>
<!--顶部 -->
<div class="header">
<div class="logo"><img src="../img/work1/logo.png" / alt="logo"></div>
<div class="nav">
<ul>
<li><a href="https://www.imooc.com/">学校概况</a></li>
<li><a href="https://www.imooc.com/">机构设置</a></li>
<li><a href="https://www.imooc.com/">师资队伍</a></li>
<li><a href="https://www.imooc.com/">科学研究</a></li>
<li><a href="https://www.imooc.com/">招生就业</a></li>
<li><a href="https://www.imooc.com/">图书馆</a></li>
<li><a href="https://www.imooc.com/">校长信箱</a></li>
<li><a href="https://www.imooc.com/">校园导航</a></li>
</ul>
</div>
<div class="nav1">
<form>
快速通道
<select name="aisle">
<option value="Volvo">Volvo</option>
<option value="Volvo1">Volvo1</option>
<option value="Volvo2">Volvo2</option>
</select>
</form>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.header{
width: 100%;
height: 100px;
background-color: #E1F2F9;
display: flex;
justify-content: space-around;
align-items: center;
}
.header>.logo>img{
width: 300px;
height: 85px;
}
.header>.nav>ul>li{
display: inline;
font: 25px '微软雅黑' bold;
padding: 18px;
}
.header>.nav>ul>li>a{
text-decoration: none;
}
.header>nav1{
font: 15px '微软雅黑';
}
问题2：如果是利用浮动，麻烦老师提供下思路，我再试着写一下
问题3：如果是利用position定位，由于距离还是不太会算，应该怎么样去实现
问题4：这三种方法是否都可以实现效果，哪种方法较为简便
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星