试了下两种方式float和这个一浮动都得浮动而且还要设置margin值，这样的话本来就对称，所以设置margin也只用简单设置一下就可以了。但是为啥当初没有教呀

<style>

margin: 0;

padding: 0;

}

header{

width: 1200px;

background-color: black;

display: flex;

}

.logo{

width: 20%;

display: flex;

justify-content: space-around;

align-items: center;

}

.nav{

width: 70%;

display: flex;

justify-content: space-around;

align-items: center;

color: white;

list-style: none;

font-size: 20px;

}

.login{

width: 10%;

display: flex;

justify-content: space-around;

align-items: center;

}

.login input{

color: white;

background-color: orange;

font-size: 20px;

border-radius: 5px;

}

</style>

<body>

<!-- <script>

console.log(window.innerWidth)

</script> -->

</div>

</div>

</ul>

</div>

</header>

</body>

在这里输入代码，可通过选择【代码语言】突出显示

Vigorous阿炎 2020-11-29

源自：移动Web开发入门 3-10 编程练习

收起

3回答

好帮手慕久久 2020-11-29 19:15:26

同学你好，问题解答如下：

1、margin可以和flex一起使用

2、pc端可以使用flex布局。只有特殊情况下，比如需要考虑兼容性问题时，例如让我们开发能兼容ie浏览器的页面时，就需要考虑flex布局是否可行了，此时为了更好的兼容浏览器，可以优先考虑使用float布局。
3、flex布局记住常用的即可。同学可以继续往后学，后面会用到flex布局。

祝学习愉快！

收起回答

提问者 Vigorous阿炎 #1

好的，谢谢。

2020-11-29 23:20:43

好帮手慕久久 2020-11-29 18:32:37

同学你好，解答如下：

1、flex兼容性问题，由于移动端兼容性比较好，所以在移动端推荐使用flex布局。而pc端，当考虑兼容性问题时，则建议使用float布局。所以二者都要学习，并且都要会用。这也是将flex布局放在移动端这里讲的原因。
2、float布局是有用武之地的，喜欢用float布局的人还是比较多的，因此我们要学会它，这样才能看懂别人写的代码。
祝学习愉快！

收起回答